从 object 的 javascript 数组创建树结构

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

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

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