remove duplicate data from Spotify API in Reactjs

Question

so I am getting data Spotify API in JSON but the data I am receiving is duplicated and I want to remove the duplicate data...
so what does the following function do: it fetches the data from Spotify API and as you can see I am storing the fetched data in ```setAlbums()``` (which is a useState array of object const).

  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);
  };

and this is the output:

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.

Heres a thread about removing duplicates in an array of objects, maybe it helps. https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects/70406623#70406623 — Warwick, Jun 02 '22 at 13:15
@Codenewbie I am unable to post the image but I have uploaded the output as code — , Jun 02 '22 at 13:16

Mo D Genesis · Accepted Answer · 2022-06-02T13:29:15.007

0

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,
}));

edited Jun 02 '22 at 13:29

answered Jun 02 '22 at 13:23

Mo D Genesis

5,187
1
21
32

1

your answer did work but how can I store it in State Const ```setAlbums()``` – Jun 02 '22 at 14:26
No problem, I'm glad it helped you. Don't forget to accept this solution by pressing the checkmark so other people know that this was the solution for you. – Mo D Genesis Jun 08 '22 at 08:56

remove duplicate data from Spotify API in Reactjs

1 Answers1