How to turn nested objects into array?

Question

I am struggling to what seems to be a trivial task. I need to iterate over this nested object...

[
     {
          "id": "1",
          "name": "Level 1",
          "parent": null,
          "expanded": true,
          "title": "Level 1",
          "children": [
               {
                    "id": "2",
                    "name": "Level 2",
                    "parent": 1,
                    "expanded": true,
                    "title": "Level 2",
                    "children": [
                         {
                              "id": "3",
                              "name": "Level 3",
                              "parent": 2,
                              "expanded": true,
                              "title": "Level 3"
                         }
                    ]
               }
          ]
     }
]

... and end up with below structure.

I have tried .map(Object.values) but that only seems to work partially. What is the most optimal way to get there? What are the alternatives?

 [
  { id: '1', name: 'Level 1', parent: null, expanded: true },
  { id: '2', name: 'Level 2', parent: 1, expanded: true },
  { id: '3', name: 'Level 3', parent: 2, expanded: true }
]

What do you struggles look like? That would help us help you. — T.J. Crowder
– T.J. Crowder, Commented May 20, 2020 at 8:46
Instead of asking for direct solution, Provide more details on what aproach you're taking. — Jimish Fotariya
– Jimish Fotariya, Commented May 20, 2020 at 8:53
btw, your id and parent properties do not match typewise. — Nina Scholz
– Nina Scholz, Commented May 20, 2020 at 9:03
@JimishFotariya was looking for ideas or directions. I have tried .map as well as constructing the objects falling into a rabbit hole. Wanted some clear ideas / directions. Sorry if I came across as looking for a straight up answer. — Alexey Shevelyov
– Alexey Shevelyov, Commented Jun 2, 2020 at 7:00

Nina Scholz · Accepted Answer · 2020-05-20 08:52:38Z

6

You could take a recursive approach and seperate children from the objects and map the rest object and the flat children.

var getFlat = ({ children = [], ...rest }) => [rest, ...children.flatMap(getFlat)],
    data = [{ id: "1", name: "Level 1", parent: null, expanded: true, title: "Level 1", children: [{ id: "2", name: "Level 2", parent: 1, expanded: true, title: "Level 2", children: [{ id: "3", name: "Level 3", parent: 2, expanded: true, title: "Level 3" }] }] }],
    result = data.flatMap(getFlat);

console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered May 20, 2020 at 8:52

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Narendra Chouhan · Accepted Answer · 2020-05-20 09:00:38Z

2

You can try this way, this will work for you

let nestedArrayObj = [{ "id": "1", "name": "Level 1", "parent": null, "expanded": true, "title": "Level 1", "children": [{ "id": "2", "name": "Level 2", "parent": 1, "expanded": true, "title": "Level 2", "children": [{ "id": "3", "name": "Level 3", "parent": 2, "expanded": true, "title": "Level 3" }] }] }]
let nestedArray = []
function nestedArrayFn(nestedArrayObj) {
    nestedArrayObj.forEach(obj => {
        nestedArray.push(JSON.parse(JSON.stringify(obj, ['id', 'name', 'parent', 'expanded'])))
        if (obj.children && obj.children.length) {
            nestedArrayFn(obj.children)
        }
    })
    return nestedArray
}
let finalArray = nestedArrayFn(nestedArrayObj)

console.log(finalArray)

edited May 20, 2020 at 9:00

answered May 20, 2020 at 8:53

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

Comments

Ele · Accepted Answer · 2020-05-20 08:58:21Z

2

Using a recursive approach with the function Array.prototype.map.

let a = [{ id: "1", name: "Level 1", parent: null, expanded: true, title: "Level 1", children: [{ id: "2", name: "Level 2", parent: 1, expanded: true, title: "Level 2", children: [{ id: "3", name: "Level 3", parent: 2, expanded: true, title: "Level 3" }] }] }];

function loop(arr) {
  let nested = [];
  return [].concat(arr.map(({id, name, parent, expanded, children}) => {
     if (children) nested = nested.concat(loop(children));
     return {id, name, parent, expanded};
  }), nested);
}

console.log(loop(a));

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered May 20, 2020 at 8:58

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

Rajneesh · Accepted Answer · 2020-05-20 09:04:39Z

2

You can build a recursive function to tackle this.

var data = [ { "id": "1", "name": "Level 1", "parent": null, "expanded": true, "title": "Level 1", "children": [ { "id": "2", "name": "Level 2", "parent": 1, "expanded": true, "title": "Level 2", "children": [ { "id": "3", "name": "Level 3", "parent": 2, "expanded": true, "title": "Level 3" } ] } ] }];

let resolve= (array, modified = []) =>{
  array.forEach(({children, ...rest})=>{
   modified.push(rest);
   if(children) resolve(children, modified);
  });
 return modified;
}

console.log(resolve(data))

edited May 20, 2020 at 9:04

answered May 20, 2020 at 8:57

Rajneesh

5,3181 gold badge10 silver badges20 bronze badges

Comments

Yevhen Horbunkov · Accepted Answer · 2020-05-20 09:19:15Z

2

You need to iterate through nested children recursively, like that:

const obj = {"id":"1","name":"Level 1","parent":null,"expanded":true,"title":"Level 1","children":[{"id":"2","name":"Level 2","parent":1,"expanded":true,"title":"Level 2","children":[{"id":"3","name":"Level 3","parent":2,"expanded":true,"title":"Level 3"}]}]},
 
    flattenObj = ({title, children, ...rest}) => 
      ([rest, ...(children ? children.flatMap(flattenObj) : [])])
    
console.log(flattenObj(obj))

.as-console-wrapper{min-height:100%;}

edited May 20, 2020 at 9:19

answered May 20, 2020 at 8:53

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to turn nested objects into array?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related