So I have this code
export const load = async ({fetch}) => {
// eslint-disable-next-line prefer-const
let playlists: Playlist[] = [];
const ress = await fetch('api/token');
const access_token = await ress.text();
console.log("The access " + access_token)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getPlaylists = async (access_token: string) => {
console.log("second access + " + access_token)
const response = await fetch('https://api.spotify.com/v1/me/playlists', {
headers: {
Authorization: `Bearer ${access_token}`
}
});
console.log("before")
if (!response.ok) {
console.log('there has been an error')
}
const data = await response.json()
console.log(data)
let next = data.next
let items = data.items
// eslint-disable-next-line prefer-const
let total = data.total
while (next) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
for (const i of total) {
const playlist: Playlist = {
name: items.name,
id: items.id,
songs: items.tracks
}
playlists.push(playlist);
const res = await fetch('https://api.spotify.com/v1/me/playlists', {
headers: { 'Authorization': 'Bearer ' + access_token }
});
const data_second = await res.json()
next = data_second.next
items = data_second.items
total = data_second.total
}
}
};
getPlaylists(access_token)
return { playlists: playlists }
}
So I get an error : https://pastebin.com/qrgxFKfv but I don't get how since I pass in the access token and I have checked to make sure that the access token in the getPlaylists method is valid.
https://pastebin.com/vvLWPJvj I am confused how there is no name attribute on the data response since it is there in the docuemnetation: https://developer.spotify.com/documentation/web-api/reference/get-a-list-of-current-users-playlists
Extra info: my playlist type: https://pastebin.com/CGVK9hHC
I have checked if the access token is valid and it seems to be valid and I have looked at the spotify api docs and there should be a name attribute on the response