Convert array with tree structure to object in Javascript

Question

I have an array with the following format

 let array = [{id: 1, desc: 'd1', children:[{id:1.1, desc:'d1.1', children:[]}]}, 
                 {id:2, desc:'d2', children:[] }, 
                 {id:3, desc:'d3', children:[] }];

Where each child is of the same time as the parent element. I would like it to transform it into an object with the format { [id]: {values} }:

{
 1: { id: 1, desc: 'd1', children: {1.1: {id:1.1, desc:'d1.1'}},
 2: { id:2, desc:'d2' },
 3: { id:3, desc:'d3' }
}

I tried in many ways but with no success. For instance:

let obj = array.map(a => mapArrayToObj(a));

mapArrayToObj = (e) => { 
     let obj = {[e.id]: e };
     if(e.children.lenght > 0){
       e.children = e.children.map(c => mapArrayToObj(c)); 
     }
     else{
       return {[e.id]: e }; 
     }
}

Is it even feasible in Javascript?

JSON is a textual data format. What you want is just an object. No JSON involved. I updated your question to reflect this. — Mike Cluck
– Mike Cluck, Commented Mar 15, 2018 at 15:34
Is {e.id: e } a syntax eror and did you mean to write { [e.id]: e }? — user3297291
– user3297291, Commented Mar 15, 2018 at 15:34

Nina Scholz · Accepted Answer · 2018-03-15 15:37:29Z

3

You could use a recursive function which generates an object out of the given items without mutating the original data.

function getObjects(array) {
    var object = {};
    array.forEach(function (item) {
        object[item.id] = Object.assign({}, item, { children: getObjects(item.children) });
    });
    return object;
}

var array = [{ id: 1, desc: 'd1', children: [{ id: 1.1, desc: 'd1.1', children: [] }] },        { id: 2, desc: 'd2', children: [] },        { id: 3, desc: 'd3', children: [] }];

console.log(getObjects(array));

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

answered Mar 15, 2018 at 15:37

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

2 Comments

CiccioMiami Over a year ago

Thanks! What could be a version that works in Typescript as well (it does not like the assignment tot object[item.id])?

Nina Scholz Over a year ago

sorry, i have no idea of typescript.

Hammerbot · Accepted Answer · 2018-03-15 15:36:10Z

1

Let's try with this code...

let array = [{id: 1, desc: 'd1', children:[{id:1.1, desc:'d1.1', children:[]}]},
    {id:2, desc:'d2', children:[] },
    {id:3, desc:'d3', children:[] }]

let object = {}

array.forEach(item => {
    let children = item.children
    object[item.id] = item
    object[item.id].children = {}
    children.forEach(child => {
        object[item.id].children[child.id] = child
    })
})

console.log(object)

Result:

{ '1': { id: 1, desc: 'd1', children: { '1.1': [Object] } },
  '2': { id: 2, desc: 'd2', children: {} },
  '3': { id: 3, desc: 'd3', children: {} } }

answered Mar 15, 2018 at 15:36

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

1 Comment

CiccioMiami Over a year ago

Thanks! What could be a version that works in Typescript as well (it does not like the assignment to object[item.id])?

Nenad Vracar · Accepted Answer · 2018-03-15 15:45:36Z

1

You could use reduce() method to create recursive function and return object object as a result.

let array = [{id: 1, desc: 'd1', children:[{id:1.1, desc:'d1.1', children:[]}]}, {id:2, desc:'d2', children:[] }, {id:3, desc:'d3', children:[] }]
                 
function build(data) {
  return data.reduce(function(r, {id, desc, children}) {
    const e = {id, desc}
    if(children && children.length) e.children = build(children);
    r[id] = e
    return r;
  }, {})
}

const result = build(array)
console.log(result)

answered Mar 15, 2018 at 15:45

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Collectives™ on Stack Overflow

Convert array with tree structure to object in Javascript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related