JavaScript 将对象数组格式化为嵌套子项

Question

我有一个包含 parentId 和排序值的对象数组，我想将它们放入一个包含嵌套“子项”的数组中并适当排序。

例如，这里是数据:

[{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}]

我想要转换它的方式是这样的:

[{
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B',
    children: []
}, {
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A',
    children: [{
        id: 2,
        sort: 1,
        parentId: 1,
        name: 'A.1'
    }, {
        id: 3
        sort: 2,
        parentId: 1,
        name: 'A.2'
    }]
}]

这是排序的(id 4 在顶部，因为排序是 1)并且子项是嵌套的并且也相应地排序。

关于执行此操作的好方法有什么建议吗？我可以递归循环以应用子项，但不确定如何保持排序。

Answer 1

这是一个先排序后过滤的提案。

排序采用属性 parentId 和 sort。这是下一步所必需的，因为“过滤”需要一个排序的数组。

稍后用 Array#filter() 过滤数组, 这里是 thisArgs 用于引用可能插入子节点的节点。

编辑:更新未排序的 (id/parentId) 数据。

var array = [{ id: 1, sort: 2, parentId: null, name: 'A' }, { id: 2, sort: 1, parentId: 1, name: 'A.1' }, { id: 3, sort: 2, parentId: 1, name: 'A.2' }, { id: 4, sort: 1, parentId: null, name: 'B' }],
    nested;

array.sort(function (a, b) {
    return (a.parentId || -1) - (b.parentId || -1) || a.sort - b.sort;
});

nested = array.filter(function (a) {
    a.children = this[a.id] && this[a.id].children;
    this[a.id] = a;
    if (a.parentId === null) {
        return true;
    }
    this[a.parentId] = this[a.parentId] || {};
    this[a.parentId].children = this[a.parentId].children || [];
    this[a.parentId].children.push(a);
}, Object.create(null));

document.write('<pre>' + JSON.stringify(nested, 0, 4) + '</pre>');