Menu
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?
277
toString() method is used to convert: an array of numbers, strings, mixed arrays, arrays of objects, and nested arrays into strings.
Creating a Nested Array: Let's create nested arrays using those three methods to get an idea of Nested Arrays. This one is just equating the variable to the array. Second one is using the array method new Array() . And the last one is using the Array() which is similar to the new Array() .
Nested Array in JavaScript is defined as Array (Outer array) within another array (inner array). An Array can have one or more inner Arrays. These nested array (inner arrays) are under the scope of outer array means we can access these inner array elements based on outer array object name.
A nested array is still an array – It just so happens that we put another array or object inside it.
Nested arrays are still arrays. There’s nothing “special” about it, we can push () and pop () as usual. Of course, the many other functions and properties will also work – length, splice (), shift (), and unshift (). Sadly, running through a nested array is not as simple as using a for loop…
Sadly, running through a nested array is not as simple as using a for loop… To traverse a nested array, we will have to use a recursive function. Yep – If you are looking to check if a value exists in a nested array, the usual ARRAY.find () will not quite work.
The new array needs to have the same structure as the original array (array of arrays). I haven't had any luck getting that result. I have tried to 'push' the array of matches but I either get one giant array or an array of smaller arrays that do not match the structure of the original array.
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);If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
