Create nested array in Javascript

Question

I'm trying to convert my data from API to my needs. Would like to create a nested array from plain array. I would like to group elements by parentId property, if parentId would not exist I would put it as a root. id value is unique. Like so (raw data):

[
    {id: 1, name: 'sensor'},
    {id: 2, name: 'sensor', parent: 1},
    {id: 3, name: 'sensor', parent: 1},
    {id: 4, name: 'sensor', parent: 3},
    {id: 5, name: 'sensor'},
    {id: 6, name: 'sensor', parent: 5}
]

Converted Data:

  const results = [
    {
      id: 1,
      name: "sensor",
      children: [
        { id: 2, name: "sensor", parent: 1 },
        {
          id: 3,
          name: "sensor",
          parent: 1,
          children: [{ id: 4, name: "sensor", parent: 3 }]
        }
      ]
    },
    { id: 5, name: "sensor", children: [{ id: 6, name: "sensor", parent: 5 }] }
  ];

I found this recursive method but it assumes that the parent property exist for every element in an array. In my example root level element would not have parent property.

function getNestedChildren(arr, parent) {
    var out = []
    for(var i in arr) {
        if(arr[i].parent == parent) {
            var children = getNestedChildren(arr, arr[i].id)

            if(children.length) {
                arr[i].children = children
            }
            out.push(arr[i])
        }
    }
    return out
}

Answer 1

您可以采取一种使用两种关系的方法，一种从孩子到父母的关系，反之亦然。最后获取根节点的子节点。

此方法适用于未排序的数据。

var data = [{ id: 1, name: 'sensor' }, { id: 2, name: 'sensor', parent: 1 }, { id: 3, name: 'sensor', parent: 1 }, { id: 4, name: 'sensor', parent: 3 }, { id: 5, name: 'sensor' }, { id: 6, name: 'sensor', parent: 5 }],
    tree = function (data, root) {
        var t = {};
        data.forEach(o => {
            Object.assign(t[o.id] = t[o.id] || {}, o);
            t[o.parent] = t[o.parent] || {};
            t[o.parent].children = t[o.parent].children || [];
            t[o.parent].children.push(t[o.id]);
        });
        return t[root].children;
    }(data, undefined);
    
console.log(tree);

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