Get a new Array from an Object with multiple arrays

Question

I am getting a very big object from my API Endpoint back. It is an object with multiple arrays. In each of them as an url (items.[0].images[0].url for example). I would like to create a new Array, just with the urls and store them in my Redux store.

I have tried to use a filter method, but I am getting back the same big Array every time, without any changes.

Furthermore, I notice if I console.log(typeof res.data.items) I am getting an object instead of an array as an output. I am a just confused, because my console is also saying res.data.items is an array.

Thats a part of my res object

{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {url: "/me/top/artists?limit=20&offset=11", method: "get", headers: {…}, baseURL:    "https://api.spotify.com/v1", transformRequest: Array(1), …}



data:
href: "https://api.spotify.com/v1/me/top/artists?limit=20&offset=11"
items: Array(20)
0:
external_urls: {spotify: "https://open.spotify.com/artist/0fA0VVWsXO9YnASrzqfmYu"}
followers: {href: null, total: 4774667}
genres: (3) ["hip hop", "ohio hip hop", "rap"]
href: "https://api.spotify.com/v1/artists/0fA0VVWsXO9YnASrzqfmYu"
id: "0fA0VVWsXO9YnASrzqfmYu"
images: Array(3)
     0:
         height: 640
          url: "https://i.scdn.co/image/4cb57ae1ef87546455db9cf65ba414c311ff459a"

1: {…}
2: {…}

....

that's my function

.then((res) => {
      ***let newdata = res.data.items.filter((url) => url.images[0].url)*** // not working

      console.log('newdata', newdata) // getting back res.data.items

      console.log(res.data.items) // Array
      console.log('res', res)
      console.log(typeof res.data.items) // Object ?
      dispatch({
        type: FETCH_TOP_25_ALBUMS,
        payload: newdata,
      })
    })

you need to use map instead of filter in case you want to transform the array. Try using res.data.items.map instead — Cybershadow
– Cybershadow, Commented Apr 30, 2021 at 19:21

T J · Accepted Answer · 2021-04-30 19:21:48Z

1

To create a new Array, you can use Array.map(). Try

let newdata = res.data.items.map(item => item.images[0].url)

answered Apr 30, 2021 at 19:21

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Rg Over a year ago

Genius. Pleas don't say my mistake was to use url instead of item

Ben Wainwright Over a year ago

No your mistake was to use filter instead of map

Ben Wainwright · Accepted Answer · 2021-04-30 19:23:53Z

0

.filter() doesn't do what you think it does. Filter takes a "predicate", that is a function which takes an input and returns either true or false. It then applies that function to each array element and returns an array containing only the elements where the predicate returned true.

So in the case of

[1, 2, 3, 4, 5].filter(item => item > 3)

You would get a return value of [4, 5], because only 4 and 5 return true when applied to the predicate item => item > 3

In your case your filter function is res.data.items.filter((url) => url.images[0].url). Since your predicate is just returning the value of the url field, your predicate is always going to return true unless the url field is set to either

undefined
null
"" (an empty string)

That's almost certainly not the case in any of your data, so entire array is being returned.

What you are trying to do is take an array where each element has shape X and map it to an array where each element has shape Y. For this you need .map()

Try the following:

res.data.items.map(item => item.images[0].url)

This will take the contents of the res.data.items array, and replace each element with the return value of the function passed in when supplied with the value of that element.

answered Apr 30, 2021 at 19:23

Ben Wainwright

4,7111 gold badge21 silver badges42 bronze badges

5 Comments

Daniel Rg Over a year ago

Oh I got. Could you help my maybe with another thing I will updated my question in 1 minutes

Ben Wainwright Over a year ago

@DanielRg If you have a different problem, you should create a new question

Daniel Rg Over a year ago

I have to wait 90 minutes that's the problem. But if I do not get an answer I will do that

Ben Wainwright Over a year ago

@DanielRg I've just rejected your attempt to edit my answer. Stack Overflow answers are for answers to the question only. If you have a new question, please create a new question.

Ben Wainwright Over a year ago

No problem :) if you wouldn't mind clicking the green tick next to my answer to indicate that its the accepted answer to your question that would be fab

Collectives™ on Stack Overflow

Get a new Array from an Object with multiple arrays

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related