Trying to render or merge multiple Object.keys

Question

I am currently receiving data from Spotify via Search API. But, I don't know how to handle multiple objects.

Screenshot

I am currently, able to: response.data.albums.items and then map((item) => { });

Is there a way to render all of them, Albums, Artists, and Tracks?

Render to an <ul><li></li></ul>.

What do you mean with "But, I don't know how to handle multiple objects."? How do you want to handle it? — MWO, Nov 10 '20 at 18:12
From the screenshot I posted: I get, **Albums**, **Artists**, and **Tracks**, and to render all of them at once in a **
** seems impossible, so I am able to only render one of them: *response.data.albums.items*. — , Nov 10 '20 at 18:14

Md Sabbir Alam · Accepted Answer · 2020-11-10T18:30:13.600

0

You can use Object.keys.

const keyArray = Object.keys(response.data);
const mergedArray = keyArray.map((key) => {
   console.log(response.data[key]); // Albums, Artists, Tracks
   return response.data[key].items; // I am assuming Albums,Artists and Tracks have items key.
});

console.log(mergedArray);

edited Nov 10 '20 at 18:30

answered Nov 10 '20 at 18:22

Md Sabbir Alam

4,937
3
15
30

Hi, thanks for this response. Is it possible to merge them and then map them? – Nov 10 '20 at 18:25
You want to merge all the items from Albums, artists and tracks to one array? – Md Sabbir Alam Nov 10 '20 at 18:26
Yes, if possible? – Nov 10 '20 at 18:29
Is this something: https://stackoverflow.com/questions/40894266/react-combine-data-returned-two-api-calls-and-set-state-of-an-array-with-these ? – Nov 10 '20 at 18:30
This didn't solve my problem, but, I am giving you points. – Nov 11 '20 at 05:36
Please add your expected output so that we can help. – Md Sabbir Alam Nov 11 '20 at 05:37
I solved it myself, using `.forEach` loop and `.push()`. – Nov 11 '20 at 05:40

Trying to render or merge multiple Object.keys

1 Answers1