CODEWITHSUNDEEP
javascriptjson
Raj
Raj

Reputation: 489

Create tree structure from javascript array of object

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

Upvotes: 2

Views: 229

Answers (3)

Nina Scholz
Nina Scholz

Reputation: 386522

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; }

Upvotes: 2

Mauro Insacco
Mauro Insacco

Reputation: 1284

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);

Upvotes: 0

zendka
zendka

Reputation: 1317

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.

Upvotes: 0

Related Questions