Iterate through an array of nested objects and create a new array from the objects values in the same order and length the values were positioned

Question

I'm trying to create a new array from the obj values that follow the same length and order as the nested array of objects. I've tried creating nested for loops that would automate the process to do so but haven't had any luck. I have a hardcoded example at the bottom that breaks down what I'm trying to achieve.

The value newArr needs to be

[
    [
      [0,1],
      [2]
    ],

    [
      [3],
      [4]
    ],

     [
      [5],
      [6,7,8]
    ],

    [
      [9,10,11],
      [12,13,14]
    ],

    [
       [15,16,17],
    ]
]

The array of objects newArr will be modeled from

var obj = [
    [
      [{foo:0},{foo:1}],
      [{foo:2}]
    ],

    [
      [{foo:3}],
      [{foo:4}]
    ],

     [
      [{foo:5}],
      [{foo:6},{foo:7},{foo:8}]
    ],

    [
      [{foo:9},{foo:10},{foo:11}],
      [{foo:12},{foo:13},{foo:14}]
    ],

    [
       [{foo:15},{foo:16},{foo:17}],
    ]
]

The array of numbers keeping track of the nested array of objects position

var nums = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]

Stores nums in the order and length of each array of objects

var newArr = []

Creates nth amount of secondary parent arrays equivalent to obj length

for(var i=0;i<obj.length;i++) {
  
  newArr.push([])
  
}

Hardcoded example of newArr pushing numbers from the nums array

Here I'm splicing num with 0 as the first parameter and the lengths of the first two nested arrays from obj

The main goal is not to hardcode the values to create the new array but to create some kind of for loop that would handle it

newArr[0].push([nums.splice(0,2)])
newArr[0].push([nums.splice(0,1)])

If you don't want to hardcode anything and want to be able to have as many levels as you like, you're going to need recursion (a function which calls itself) — blex
– blex, Commented Dec 7, 2020 at 23:31
@EugenSunic Thank you this worked out best for my issue. Do you mind breaking down how this works, please to get a better understanding? — astromodem
– astromodem, Commented Dec 8, 2020 at 18:27

Ori Drori · Accepted Answer · 2020-12-08 19:27:03Z

3

Create a recursive function that maps the array. If an item is an array call the function on it, if not take the value of foo:

const fn = arr => arr.map(o => 
  Array.isArray(o) ? // if the item is an array
    fn(o) // run the item through the function
    : 
    o.foo) // get the value of foo

const arr = [[[{"foo":0},{"foo":1}],[{"foo":2}]],[[{"foo":3}],[{"foo":4}]],[[{"foo":5}],[{"foo":6},{"foo":7},{"foo":8}]],[[{"foo":9},{"foo":10},{"foo":11}],[{"foo":12},{"foo":13},{"foo":14}]],[[{"foo":15},{"foo":16},{"foo":17}]]]

const result = fn(arr)

console.log(result)

You can make the recursive function more generic by supplying accepting a predicate that will handle non array values:

const fn = (pred, arr) => 
  arr.map(o => 
    Array.isArray(o) ? // if the value is an array
      fn(pred, o) // call the function on the item and pass the predicate
      : 
      pred(o) // run the predicate on the item
    )

const arr = [[[{"foo":0},{"foo":1}],[{"foo":2}]],[[{"foo":3}],[{"foo":4}]],[[{"foo":5}],[{"foo":6},{"foo":7},{"foo":8}]],[[{"foo":9},{"foo":10},{"foo":11}],[{"foo":12},{"foo":13},{"foo":14}]],[[{"foo":15},{"foo":16},{"foo":17}]]]

const result = fn(o => o.foo, arr) // run the function with the predicate an the array

console.log(result)

edited Dec 8, 2020 at 19:27

answered Dec 7, 2020 at 23:33

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

5 Comments

astromodem Over a year ago

I'm having a hard time compiling the code in Repl.it. I see your answer in the Run code snippet but when I transfer it to a text editor receive an error.

Ori Drori Over a year ago

Your browser/repl.it might not support optional chaining. I'll update the answer - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

astromodem Over a year ago

I switched my repl to support ES6 and the output is correct thank you

astromodem Over a year ago

Do you mind breaking the code down for me so I can get a better understanding?

astromodem Over a year ago

Thank you I see the difference between your code and the others. This answer is able to iterate through multiple nested arrays regardless of size which helps prevent the hard coding and the length of the nested arrays does not have to be known the function will handle it.

Collectives™ on Stack Overflow

Iterate through an array of nested objects and create a new array from the objects values in the same order and length the values were positioned

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related