const artistInfoHandler = (id) => {
setLoading(true);
setAlbums([]);
fetch(`https://api.spotify.com/v1/artists/${id}/albums`, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${data.access_token}`,
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((response) => {
console.log(response);
for (let i = 0; i < response.items.length; i++) {
setAlbums((old) => [
...old,
{
albumTitle: response.items[i].name,
albumImage: response.items[i].images[0].url,
},
]);
}
})
.catch((error) => console.log(error));
setLoading(false);
};
0: {albumTitle: 'Certified Lover Boy', albumImage: 'xxxxxxxxxxxx'}
1: {albumTitle: 'Certified Lover Boy', albumImage: 'xxxxxxxxxxxxxxxxxx'}
2: {albumTitle: 'Dark Lane Demo Tapes', albumImage: 'xxxxxxxxxxxxxxxxxx'}
3: {albumTitle: 'Dark Lane Demo Tapes', albumImage: 'xxxxxxxxxxxx'}
4: {albumTitle: 'Care Package', albumImage: 'xxxxxxxxxxxx'}
5: {albumTitle: 'Care Package', albumImage: 'xxxxxxxxxxxx'}
6: {albumTitle: 'So Far Gone', albumImage: 'xxxxxxxxxxxx'}
7: {albumTitle: 'Scorpion', albumImage: 'xxxxxxxxxxxx'}
8: {albumTitle: 'Scorpion', albumImage: 'xxxxxxxxxxxx'}
9: {albumTitle: 'More Life', albumImage: 'xxxxxxxxxxxx'}
10: {albumTitle: 'More Life', albumImage: 'xxxxxxxxxxxx'}
11: {albumTitle: 'Views', albumImage: 'xxxxxxxxxxxx'}
12: {albumTitle: 'Views', albumImage: 'xxxxxxxxxxxx'}
13: {albumTitle: 'What A Time To Be Alive', albumImage: 'xxxxxxxxxxxx'}
14: {albumTitle: 'What A Time To Be Alive', albumImage: 'xxxxxxxxxxxx'}
15: {albumTitle: "If You're Reading This It's Too Late", albumImage: 'xxxxxxxxxxxx'}
16: {albumTitle: "If You're Reading This It's Too Late", albumImage: 'xxxxxxxxxxxx'}
17: {albumTitle: 'Nothing Was The Same (Deluxe)', albumImage: 'xxxxxxxxxxxx'}
18: {albumTitle: 'Nothing Was The Same (Deluxe)', albumImage: 'xxxxxxxxxxxx'}
19: {albumTitle: 'Nothing Was The Same', albumImage: 'xxxxxxxxxxxxxxxxxx'}
now when I am NOT using array of objects i.e when I am storing the data in different state const then I am able to remove the duplicacy by this:
const newAlbums = [...new Set(albums)] but when I am using array of objects I am unable to do so.
In your case I think u should do:
//removes duplicate names
var filteredItems = response.items.filter((v,i,a)=>a.findIndex(v2=>(v2.name===v.name)) === i);
//maps to a new object array
var newArray = filteredItems.map(x => ({
albumTitle: x.name,
albumImage: x.images[0].url,
}));