Create tree structure from javascript array of object

Question

I have an array of objects like this..

var obj_1 = {id:1, title:"Title 1", unitId:0, line: 0};
var obj_2 = {id:2, title:"Title 1.1", unitId:1, line: 0};
var obj_3 = {id:3, title:"Title 1.2", unitId:1, line: 1};
var obj_4 = {id:4, title:"Title 1.1.1", unitId:0, line: 1};
var obj_5 = {id:5, title:"Title 2", unitId:0, line: 1};
var obj_list = [obj_1,obj_2,obj_3,obj_4,obj_5];

I want to convert the json to tree structure, my result structure like this

Unit 0: {
 Line 0: {
 children: {
 {id:1, title:"Title 1", unitId:0, line: 0}
 }
 },
 Line 1: {
 children: {
 {id:4, title:"Title 1.1.1", unitId:0, line: 1},
 {id:5, title:"Title 2", unitId:0, line: 1}
 }
 }
}
Unit 1: {
 Line 0: {
 children: {
 {id:2, title:"Title 1.1", unitId:1, line: 0}
 }
 },
 Line 1: {
 children: {
 {id:2, title:"Title 1.2", unitId:1, line: 2}
 }
 }
}

If anyone know how to do, please answer. Thanks in advance

• briosheje: What did you try to accomplish the above task?
• Raj: I have tried using foreach and array reduce but its didn't work.
• Seblor: Reduce is the right method to use

Answer 1

You could take an array of the wanted keys for nesting and build new object with this keys and push at the end the object to the children property.

var data = [{ id: 1, title: "Title 1", unitId: 0, line: 0 }, { id: 2, title: "Title 1.1", unitId: 1, line: 0 }, { id: 3, title: "Title 1.2", unitId: 1, line: 1 }, { id: 4, title: "Title 1.1.1", unitId: 0, line: 1 }, { id: 5, title: "Title 2", unitId: 0, line: 1 }],
 keys = [['unitId', 'Unit'], ['line', 'Line']],
 result = data.reduce((r, o) => {
 var target = keys.reduce((q, [k, t]) => {
 var key = [t, o[k]].join(' ');
 return q[key] = q[key] || {};
 }, r);
 (target.children = target.children || []).push(o);
 return r;
 }, {});
console.log(result);

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

The same with letters for a special key.

var data = [{ id: 1, title: "Title 1", unitId: 0, line: 0 }, { id: 2, title: "Title 1.1", unitId: 1, line: 0 }, { id: 3, title: "Title 1.2", unitId: 1, line: 1 }, { id: 4, title: "Title 1.1.1", unitId: 0, line: 1 }, { id: 5, title: "Title 2", unitId: 0, line: 1 }],
 keys = [['unitId', 'Unit'], ['line', 'Line', v => (10 + v).toString(36).toUpperCase()]],
 result = data.reduce((r, o) => {
 var target = keys.reduce((q, [k, t, fn = v => v]) => {
 var key = [t, fn(o[k])].join(' ');
 return q[key] = q[key] || {};
 }, r);
 (target.children = target.children || []).push(o);
 return r;
 }, {});
console.log(result);

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

• Raj: If I want Line 0 to Line A and Line 1 to Line B...then what will I do ?
• Nina Scholz: only for lines?
• Raj: Now I want to push Line o and Line 1 into Unit 0.children..please reply me
• Nina Scholz: please ask a new question.
• Raj: stackoverflow.com/questions/58391221/…

Answer 2

First: get the structure you desire:

const structure = [];
for (obj of obj_list) {
 if (!structure[obj.unitId]) {
 structure[obj.unitId] = [];
 }
 if (!structure[obj.unitId][obj.line]) {
 structure[obj.unitId][obj.line] = [];
 }
 structure[obj.unitId][obj.line].push(obj);
}

Next: output this in the format you desire. You can probably handle this last step.

Answer 3

There's probably a cleaner way, just wanted to give a quick answer

const obj_1 = { id: 1, title: 'Title 1', unitId: 0, line: 0 };
const obj_2 = { id: 2, title: 'Title 1.1', unitId: 1, line: 0 };
const obj_3 = { id: 3, title: 'Title 1.2', unitId: 1, line: 1 };
const obj_4 = { id: 4, title: 'Title 1.1.1', unitId: 0, line: 1 };
const obj_5 = { id: 5, title: 'Title 2', unitId: 0, line: 1 };
const obj_list = [obj_1, obj_2, obj_3, obj_4, obj_5];
newJson = {};
obj_list.forEach(el => {
 newJson[`unit${el.unitId}`] ? null : (newJson[`unit${el.unitId}`] = {});
 newJson[`unit${el.unitId}`][`line${el.line}`]
 ? null
 : (newJson[`unit${el.unitId}`][`line${el.line}`] = {});
 newJson[`unit${el.unitId}`][`line${el.line}`].children
 ? null
 : (newJson[`unit${el.unitId}`][`line${el.line}`].children = []);
 newJson[`unit${el.unitId}`][`line${el.line}`].children.push(el);
});
console.log(newJson);