Quantcast
Channel: Active questions tagged rest - Stack Overflow
Viewing all articles
Browse latest Browse all 3655

My Vue API client is getting data OK, and I have the logic to turn it into .csv, but I can't seem to work out how to download the file

$
0
0

DiscogsCSV is intended to do the following:

  • Take as input a .csv file, the first column of which contains valid discogs release IDs
  • Look these release IDs up on discogs API https://api.discogs.com/
  • Return as output a new .csv file, with discogs release data for various columns appended to the release IDs:

release_id
artist
format
qty
format descriptions
label
catno
country
year
genres
styles
barcode
tracklist

Here is my code:

App.vue

<template><div><button @click="downloadSampleInputFile">Download sample file</button></div><div><FileUpload @file="setFile" /></div><div><p v-for="row of data" :key="row">            {{ row }}</p></div></template><script lang="ts">import { defineComponent } from 'vue';import FileUpload from '@/components/FileUpload.vue';import { fetchRelease, parseCsvToArray } from "@/parser";import { prepareDownload } from './components/PrepareDownload';import { downloadSampleInputFile } from './components/DownloadSampleInputFile';export default defineComponent({    name: 'App',    components: {        FileUpload,    },    data() {        return {            data: null as null | string[],        }    },    methods: {        async downloadSampleInputFile() {            const link = document.createElement('a');            link.href = '/src/assets/test_5_lines.csv';            link.target = '_blank';            link.download = 'test_5_lines.csv';            document.body.appendChild(link);            link.click();            document.body.removeChild(link);        },        async setFile(file: File) {            this.data = await parseCsvToArray(file)            console.log(this.data)        },        async fetchReleases(idList: string[]) {            try {                const releases = await fetchRelease(idList)                console.log('Fetched releases from Discogs', releases)                return releases            } catch (err) {                console.log('Failed fetching releases', err)            }        },        async downloadCSV(releases: any[]) {            prepareDownload(releases)        },    },    watch: {        data(data) {            this.fetchReleases(data)        }    },});</script>

fetchRelease.ts

import { DiscogsClient } from '@lionralfs/discogs-client';import { processReleaseData } from './ProcessReleaseData';export default  {  name: 'FetchRelease',  methods: {    fetchRelease  }}const db = new DiscogsClient().database();async function fetchRelease(releaseId: string): Promise<any[] | { error: string }> {  try {    const { data } = await db.getRelease(releaseId);    return processReleaseData(releaseId, data);  } catch (error) {    return {      error: `Release with ID ${releaseId} does not exist`    };  }}

PrepareDownload.ts

import { ROW_NAMES } from './RowNames';export default  {  name: 'PrepareDownload',  methods: {    prepareDownload  }}export function prepareDownload(releases: any[]) {    const csvContent = "releases:text/csv;charset=utf-8," + ROW_NAMES.join(",") +"\n" + releases.map(e => e.join(",")).join("\n");    const encodedUri = encodeURI(csvContent);    const link = document.createElement("a");    link.setAttribute("href", encodedUri);    link.setAttribute("download", "my_data.csv");    document.body.appendChild(link); // Required for Firefox    link.click();  }

I can get as far as console.log('Fetched releases from Discogs', releases), just fine, the data is in the console. But this bit isn't working. Any help please? TIA

    async downloadCSV(releases: any[]) {        prepareDownload(releases)

Edit: very latest changes - https://github.com/steve-davey/discogsCSV


Viewing all articles
Browse latest Browse all 3655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>