JavaScript：将具有父键的对象数组转换为父/子树（包括没有父对象的对象）
[英]JavaScript: Convert array of objects with parent keys to parent / child tree (including objects with no parent)
问题描述
我有一个带有父键的对象列表，它描述了嵌套父/子关系的几个级别。
const table =[
{
"id": 791,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 790,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 845,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 844,
"sortOrder": 0,
"parentCategoryId": 842
},
{
"id": 802,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 788,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 863,
"sortOrder": 0,
"parentCategoryId": 863
},
{
"id": 858,
"sortOrder": 0,
"parentCategoryId": 858
},
{
"id": 867,
"sortOrder": 0,
"parentCategoryId": 867
},
{
"id": 871,
"sortOrder": 0,
"parentCategoryId": 867
},
{
"id": 801,
"name": "Tickets",
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 792,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 797,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 789,
"name": "Hot food",
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 798,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 671,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 833,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 796,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 843,
"sortOrder": 0,
"parentCategoryId": 842
},
{
"id": 840,
"sortOrder": 0,
"parentCategoryId": 793
},
{
"id": 868,
"sortOrder": 0,
"parentCategoryId": 868
},
{
"id": 851,
"sortOrder": 0,
"parentCategoryId": 851
},
{
"id": 839,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 793,
"sortOrder": 0,
"parentCategoryId": 839
},
{
"id": 859,
"sortOrder": 0,
"parentCategoryId": 859
},
{
"id": 805,
"sortOrder": 0,
"parentCategoryId": 859
},
{
"id": 856,
"name": "DRINKS",
"sortOrder": 0,
"parentCategoryId": 805
},
{
"id": 870,
"sortOrder": 0,
"parentCategoryId": 856
},
{
"id": 787,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 786,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 799,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 852,
"sortOrder": 0,
"parentCategoryId": 852
},
{
"id": 795,
"name": "Gents fragrance",
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 864,
"sortOrder": 0,
"parentCategoryId": 864
},
{
"id": 854,
"sortOrder": 0,
"parentCategoryId": 854
},
{
"id": 865,
"sortOrder": 0,
"parentCategoryId": 865
},
{
"id": 869,
"name": "GFI",
"sortOrder": 0,
"parentCategoryId": 869
},
{
"id": 785,
"sortOrder": 0,
"parentCategoryId": 833
}
]
问题是我没有 0 的根父 ID。我想在一个数组中订购它，该数组显示在第一级项目中id与parentCategoryId匹配，这意味着它们每个都是根，而不是每个都有孩子中的孩子。
这是我走了多远，但很难做到这一点：
var root = { cid: 0, parent_id: null, children: []};
var node_list = { 0 : root};
for (var i = 0; i < table.length; i++) {
console.log('updated list', node_list)
console.log('item in cat', table[i])
// check if parent ID exsits in the list
if (!node_list[table[i].parentCategoryId]) {
console.log('not in the list');
console.log('node_list[table[i].parentCategoryId]', table[i].parentCategoryId)
if (table[i].parentCategoryId === table[i].cid) {
console.log('it is the root');
node_list[table[i].cid] = table[i];
}
} else {
const item = table[i];
console.log('item is ', item)
node_list[table[i].parentCategoryId].children = {
...node_list[table[i].parentCategoryId].children,
...item
};
}
}
预期结果：
const table =[
{
"id": 791,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 790,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 845,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 844,
"sortOrder": 0,
"parentCategoryId": 842
},
{
"id": 802,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 788,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 863,
"sortOrder": 0,
"parentCategoryId": 863
},
{
"id": 858,
"sortOrder": 0,
"parentCategoryId": 858
},
{
"id": 867,
"sortOrder": 0,
"parentCategoryId": 867
},
{
"id": 871,
"sortOrder": 0,
"parentCategoryId": 867
},
{
"id": 801,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 797,
"sortOrder": 0,
"parentCategoryId": 847,
children:[
{
"id": 792,
"sortOrder": 0,
"parentCategoryId": 797,
children:[
{
"id": 671,
"sortOrder": 0,
"parentCategoryId": 792
},
]
},
]
},
{
"id": 789,
"name": "Hot food",
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 798,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 833,
"sortOrder": 0,
"parentCategoryId": 833,
children:[
{
"id": 785,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 786,
"sortOrder": 0,
"parentCategoryId": 833
},
{
"id": 787,
"sortOrder": 0,
"parentCategoryId": 833
},
]
},
{
"id": 796,
"sortOrder": 0,
"parentCategoryId": 847
},
{
"id": 843,
"sortOrder": 0,
"parentCategoryId": 842
},
{
"id": 840,
"sortOrder": 0,
"parentCategoryId": 793
},
{
"id": 868,
"sortOrder": 0,
"parentCategoryId": 868
},
{
"id": 851,
"sortOrder": 0,
"parentCategoryId": 851
},
{
"id": 839,
"sortOrder": 0,
"parentCategoryId": 847,
children:[
{
"id": 793,
"sortOrder": 0,
"parentCategoryId": 839,
children:[
{
"id": 870,
"sortOrder": 0,
"parentCategoryId": 856
},
]
},
]
},
{
"id": 805,
"sortOrder": 0,
"parentCategoryId": 859,
children:[
{
"id": 856,
"sortOrder": 0,
"parentCategoryId": 805
},
{
"id": 859,
"sortOrder": 0,
"parentCategoryId": 805
},
]
},
]
2 个解决方案
解决方案1
1 已采纳 2018-10-02 14:12:41
看起来您想向初始数组中的对象添加一个带有值数组的children键，其中id值对应于数组中其他对象的一个或多个parentCategoryId值 - 并且不应将任何对象作为父对象或子对象重复在嵌套对象数组中。
您可以map数组以追加子项，然后filter以仅返回根父项（和孤子）。 例如（如果您想查看输出，请在示例下方的工作片段）：
const ids = table.map(x => x.id);
let result = table.map((parent) => {
let children = table.filter((child) => {
if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) {
return child;
}
});
if (children.length) {
parent.children = children;
}
return parent;
}).filter((obj) => {
if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) {
// include ultimate parents and orphans at root
return obj;
}
});
const table = [{ "id": 791, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 790, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 845, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 844, "sortOrder": 0, "parentCategoryId": 842 }, { "id": 802, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 788, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 863, "sortOrder": 0, "parentCategoryId": 863 }, { "id": 858, "sortOrder": 0, "parentCategoryId": 858 }, { "id": 867, "sortOrder": 0, "parentCategoryId": 867 }, { "id": 871, "sortOrder": 0, "parentCategoryId": 867 }, { "id": 801, "name": "Tickets", "sortOrder": 0, "parentCategoryId": 847 }, { "id": 792, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 797, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 789, "name": "Hot food", "sortOrder": 0, "parentCategoryId": 833 }, { "id": 798, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 671, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 833, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 796, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 843, "sortOrder": 0, "parentCategoryId": 842 }, { "id": 840, "sortOrder": 0, "parentCategoryId": 793 }, { "id": 868, "sortOrder": 0, "parentCategoryId": 868 }, { "id": 851, "sortOrder": 0, "parentCategoryId": 851 }, { "id": 839, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 793, "sortOrder": 0, "parentCategoryId": 839 }, { "id": 859, "sortOrder": 0, "parentCategoryId": 859 }, { "id": 805, "sortOrder": 0, "parentCategoryId": 859 }, { "id": 856, "name": "DRINKS", "sortOrder": 0, "parentCategoryId": 805 }, { "id": 870, "sortOrder": 0, "parentCategoryId": 856 }, { "id": 787, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 786, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 799, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 852, "sortOrder": 0, "parentCategoryId": 852 }, { "id": 795, "name": "Gents fragrance", "sortOrder": 0, "parentCategoryId": 847 }, { "id": 864, "sortOrder": 0, "parentCategoryId": 864 }, { "id": 854, "sortOrder": 0, "parentCategoryId": 854 }, { "id": 865, "sortOrder": 0, "parentCategoryId": 865 }, { "id": 869, "name": "GFI", "sortOrder": 0, "parentCategoryId": 869 }, { "id": 785, "sortOrder": 0, "parentCategoryId": 833 } ]; const ids = table.map(x => x.id); let result = table.map((parent) => { let children = table.filter((child) => { if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) { return child; } }); if (children.length) { parent.children = children; } return parent; }).filter((obj) => { if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) { // include ultimate parents and orphans at root return obj; } }); // stringify just to flatten out SO console result for easier result scanning console.log(JSON.stringify(result));
解决方案2
1 2021-06-02 09:30:48
我们有一个复杂的 json 文件，我们必须用 JavaScript 处理它以使其具有层次结构，以便以后构建一棵树。 JSON 数组的每个条目都有 - id - 唯一的 id， parentId - 父节点的 id（如果节点是树的根，则为 0） level - 树中的深度级别。
JSON 数据已经“有序”，这意味着条目将在其自身上方具有父节点或兄弟节点，在其自身下方具有子节点或兄弟节点。
const arr = [ { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } ]; const listToTree = (arr = []) => { let map = {}, node, res = [], i; for (i = 0; i < arr.length; i += 1) { map[arr[i].id] = i; arr[i].children = []; }; for (i = 0; i < arr.length; i += 1) { node = arr[i]; if (node.parentId !== "0") { arr[map[node.parentId]].children.push(node); } else { res.push(node); }; }; return res; }; console.log(JSON.stringify(listToTree(arr), undefined, 4));
将具有父/子关系的对象数组转换为嵌套对象数组
[英]Convert array of objects with parent / child relationships to array of nested objects
将多层次父子关系转换为数组（树）-JavaScript或jQuery
[英]Convert polyhierarchy parent-child relationship to array (tree) - javascript or jquery
如何通过javascript将父子数组转换为json树结构
[英]How to convert parent child array to json tree structure by javascript
如何将父对象迭代到子对象并推入数组 javascript (vuejs)
[英]how to iterate parent to child objects and pushed into an array javascript (vuejs)
修改对象数组以通过键和值将其分组为嵌套的父/子对象数组
[英]Modifying an array of objects to group into a nested parent / child array of objects by keys and values
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.