How to push data from a nested array, inside an array of objects, to a new array? while maintaining its nested structure

Question

I have an array that contains multiple objects. These objects also contain arrays of objects like this:

const data =
    [
        {
            id: 1, name: "Jack", interests: 
            [
                {id: 9, name: "basketball"},
                {id: 8, name: "art"}
            ]
        },
        {
            id: 2, name: "Jenny", interests: 
            [
                {id: 7, name: "reading"},
                {id: 6, name: "running"}
            ]
        }
    ];

I would like to push both interests arrays into a new array like so:

newArray = 
    [
        [{id: 9, name: "basketball"}, {id: 8, name: "art"}],
        [{id: 7, name: "reading"},{id: 6, name: "running"}]
    ];

This pushes the data to the new array, but the data isn't nested anymore this way:

data.map(v => { v.interests.map(x => { newArray.push({name: x.name, id:x.id}) }) })

How can I push the interests data to new array while keeping its nested structure?

CertainPerformance · Accepted Answer · 2018-05-22 04:42:24Z

12

Just .map the interests of each item:

const data=[{id:1,name:"Jack",interests:[{id:9,name:"basketball"},{id:8,name:"art"}]},{id:2,name:"Jenny",interests:[{id:7,name:"reading"},{id:6,name:"running"}]}]
const mapped = data.map(({ interests }) => interests);
console.log(mapped);

When mapping, you don't want to use push to a new array you've created beforehand; instead you want to use return (or use an arrow function's implicit return) for each new array item. (You're currently using the .map as a forEach)

If you don't want to just map the interests array and need to transform the objects as well, then it's a bit more complicated; you'll have to use a nested map as well:

const data=[{id:1,name:"Jack",interests:[{id:9,name:"basketball",foo:'bar'},{id:8,name:"art",foo:'bar'}]},{id:2,name:"Jenny",interests:[{id:7,name:"reading",foo:'bar'},{id:6,name:"running",foo:'bar'}]}]
const mapped = data.map(({ interests }) =>
  // Use only `id` and `foo` properties, discard the `name`s:
  interests.map(({ id, foo }) => ({ id, foo }))
);
console.log(mapped);

edited May 22, 2018 at 4:42

answered May 22, 2018 at 4:29

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

3 Comments

Vialito Over a year ago

thanks I got it, how about if you want to choose which properties return in the new array? Right now there are only two properties, name and id, but there could be more. I might not want to return all of them.

Tibrogargan Over a year ago

MIght be clearer to do data.map( (person) => person.interests ), or do you gain something from the syntax you're using maybe I'm not aware of?

CertainPerformance Over a year ago

@Tibrogargan IMO, destructuring is often preferable. If you only need a particular property of an object, and you don't need the whole object, then often it's nicer to simply extract that property as a variable rather than declare an object and proceed to use only use one property of the object.

Collectives™ on Stack Overflow

How to push data from a nested array, inside an array of objects, to a new array? while maintaining its nested structure

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related