Here is my code: (please just ignore App_bak)
It 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
-
Return as output the same .csv file, with discogs release data included
I looked in the browser console and read...
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.discogs.com/releases/1,2,3,4,5,. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.discogs.com/releases/1,2,3,4,5,. (Reason: CORS request did not succeed). Status code: (null).
The URL https://api.discogs.com/releases/1,2,3,4,5, that it's trying to reach is invalid and should really be https://api.discogs.com/releases/1 and so on.
My app is registered with discogs; I have the key & secret.
I have tried to debug it, screencap -
App.vue
<template>
<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";
export default defineComponent({
name: 'App',
components: {
FileUpload,
},
data() {
return {
data: null as null | string[],
}
},
methods: {
async setFile(file: File) {
this.data = await parseCsvToArray(file)
}
},
watch: {
data(releaseId) {
fetchRelease(releaseId)
}
},
});
</script>
parser.ts
import {DiscogsClient} from "@lionralfs/discogs-client";
import {processReleaseData} from "@/components/ProcessReleaseData";
import Papa from "papaparse";
const db = new DiscogsClient().database();
export 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`
};
}
}
export async function parseCsvToArray(file: File): Promise<string[]> {
return new Promise((resolve) => {
Papa.parse<string[]>(file, {
header: false,
complete: (results: Papa.ParseResult<any>) => {
console.log('Parsed: ', results.data);
resolve(results.data);
}
});
});
}
ParseCsvToArray.vue
<template>
<div>
<p v-for="row of parsedData" v-bind:key="row.id">
{{ row }}
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Papa from 'papaparse';
export default defineComponent({
name: 'ParseCsvToArray',
props: {
file: File
},
data() {
return {
parsedData: [] as any[]
}
},
methods: {
parseCsvToArray(file: File) {
Papa.parse(file, {
header: false,
complete: (results: Papa.ParseResult<any>) => {
console.log('Parsed: ', results.data);
this.parsedData = results.data;
}
});
}
},
mounted() {
if (this.file) {
this.parseCsvToArray(this.file);
}
},
});
</script>
<style></style>
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`
};
}
}
I'm trying it like this, but it's not making any API calls at all when I try it this way!
export async function* fetchRelease(data: string[]): AsyncGenerator<any[] | { error: string }, void, unknown> {
for (const releaseId of data) {
try {
const { data } = await db.getRelease(releaseId);
yield processReleaseData(releaseId, data);
} catch (error) {
yield {
error: `Release with ID ${releaseId} does not exist`
};
}
}
}
![r/vuejs - [PODCAST] Evan You on the Future of Vue.js (Vue 4, Vue 3.5 and more)](http://web.archive.org./web/20240716104944im_/https://b.thumbs.redditmedia.com/Xm2lGjMKgigbrszgT5ZiHMmZuytx12I4vF7SNOdsC6I.jpg)
