我有像下面這樣的物件陣列。這里的子元素可能嵌套很深，也可能包含其他子元素。
let response= [
{
"id": 4321,
"name": "Education",
"parentId": null,
"children": [
{
"id": 1234,
"name": "category1",
"parentId": 4321,
"children": [
{
"id": 8327548,
"name": "001",
"parentId": 1234
},
{
"id": 8327549,
"name": "002",
"parentId": 1234
},
]
},
{
"id": 6786,
"name": "Associations",
"parentId": 4321
},
{
"id": 8262439,
"name": "category1",
"parentId": 4321
},
{
"id": 8245,
"name": "Rights",
"parentId": 4321,
"children": [
{
"id": 2447,
"name": "Organizations",
"parentId": 8245
},
{
"id": 9525,
"name": "Services",
"parentId": 8245
},
{
"id": 8448,
"name": "Organizations",
"parentId": 8245
}
]
},
{
"id": 8262446,
"name": "Women's Rights",
"parentId": 4321
}
]
},
{
"id": 21610,
"name": "Agriculture",
"parentId": null,
"children": [
{
"id": 3302,
"name": "categoryABC",
"parentId": 21610,
"children": [
{
"id": 85379,
"name": "categoryABC - General",
"parentId": 3302
},
{
"id": 85380,
"name": "categoryABC Technology",
"parentId": 3302
}
]
},
{
"id": 8303,
"name": "Fungicides",
"parentId": 21610,
"children": [
{
"id": 8503,
"name": "Fungicides - General",
"parentId": 8303
}
]
},
]
},
];
我想使它成為物件的平面陣列，但我想將父名稱（其 parentId 為空）添加到相應父物件中的每個物件。
預期輸出：
[
{
"id": 8327548,
"name": "001",
"parentId": 1234
"mainParent": "Education"
},
{
"id": 8327549,
"name": "002",
"parentId": 1234,
"mainParent": "Agriculture"
},
...OTHER OBJECTS....
]
到目前為止我所做的
function flat(array) {
var result = [];
array.forEach(function (a) {
result.push(a);
if (Array.isArray(a.children)) {
result = result.concat(flat(a.children));
delete a.children;
}
});
return result;
}
它提供了物件的平面陣列，但我無法為每個物件添加父名稱屬性。
有人可以幫幫我嗎？
uj5u.com熱心網友回復：
您可以采用遞回方法將第一個發現name為的切換mainParent。
const
flat = mainParent => o => o.children
? o.children.flatMap(flat(mainParent || o.name))
: { ...o, mainParent },
response = [{ id: 4321, name: "Education", parentId: null, children: [{ id: 1234, name: "category1", parentId: 4321, children: [{ id: 8327548, name: "001", parentId: 1234 }, { id: 8327549, name: "002", parentId: 1234 }] }, { id: 6786, name: "Associations", parentId: 4321 }, { id: 8262439, name: "category1", parentId: 4321 }, { id: 8245, name: "Rights", parentId: 4321, children: [{ id: 2447, name: "Organizations", parentId: 8245 }, { id: 9525, name: "Services", parentId: 8245 }, { id: 8448, name: "Organizations", parentId: 8245 }] }, { id: 8262446, name: "Women's Rights", parentId: 4321 }] }, { id: 21610, name: "Agriculture", parentId: null, children: [{ id: 3302, name: "categoryABC", parentId: 21610, children: [{ id: 85379, name: "categoryABC - General", parentId: 3302 }, { id: 85380, name: "categoryABC Technology", parentId: 3302 }] }, { id: 8303, name: "Fungicides", parentId: 21610, children: [{ id: 8503, name: "Fungicides - General", parentId: 8303 }] }] }],
result = response.flatMap(flat());
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
這是一個相當干凈的遞回，當children節點中沒有時停止。我們捕獲name沿層次結構找到的第一個值并執行它。
const flat = (xs, name = null) =>
xs .flatMap (x => x .children
? flat (x .children, name || x .name)
: [{...x, mainParent: name}]
)
const response = [{id: 4321, name: "Education", parentId: null, children: [{id: 1234, name: "category1", parentId: 4321, children: [{id: 8327548, name: "001", parentId: 1234}, {id: 8327549, name: "002", parentId: 1234}]}, {id: 6786, name: "Associations", parentId: 4321}, {id: 8262439, name: "category1", parentId: 4321}, {id: 8245, name: "Rights", parentId: 4321, children: [{id: 2447, name: "Organizations", parentId: 8245}, {id: 9525, name: "Services", parentId: 8245}, {id: 8448, name: "Organizations", parentId: 8245}]}, {id: 8262446, name: "Women's Rights", parentId: 4321}]}, {id: 21610, name: "Agriculture", parentId: null, children: [{id: 3302, name: "categoryABC", parentId: 21610, children: [{id: 85379, name: "categoryABC - General", parentId: 3302}, {id: 85380, name: "categoryABC Technology", parentId: 3302}]}, {id: 8303, name: "Fungicides", parentId: 21610, children: [{id: 8503, name: "Fungicides - General", parentId: 8303}]}]}]
console .log (flat (response)).as-console-wrapper {max-height: 100% !important; top: 0}uj5u.com熱心網友回復：
不那么晦澀，但仍然相當簡潔。
const response = [{ id: 4321, name: 'Education', parentId: null, children: [{ id: 1234, name: 'category1', parentId: 4321, children: [{ id: 8327548, name: '001', parentId: 1234 }, { id: 8327549, name: '002', parentId: 1234 }] }, { id: 6786, name: 'Associations', parentId: 4321 }, { id: 8262439, name: 'category1', parentId: 4321 }, { id: 8245, name: 'Rights', parentId: 4321, children: [{ id: 2447, name: 'Organizations', parentId: 8245 }, { id: 9525, name: 'Services', parentId: 8245 }, { id: 8448, name: 'Organizations', parentId: 8245 }] }, { id: 8262446, name: 'Women\'s Rights', parentId: 4321 }] }, { id: 21610, name: 'Agriculture', parentId: null, children: [{ id: 3302, name: 'categoryABC', parentId: 21610, children: [{ id: 85379, name: 'categoryABC - General', parentId: 3302 }, { id: 85380, name: 'categoryABC Technology', parentId: 3302 }] }, { id: 8303, name: 'Fungicides', parentId: 21610, children: [{ id: 8503, name: 'Fungicides - General', parentId: 8303 }] }] }];
function flatten(arr, mainParent = null) {
if (!arr) return;
let result = [];
for (const obj of arr) {
result.push(...(flatten(obj.children, mainParent ?? obj.name) ?? [{ ...obj, mainParent }]));
}
return result;
}
console.log(flatten(response));.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
一個可能的解決方案可以完全基于一個單一的，雖然是遞回實作的reduce任務，其中累積和遞回傳遞的物件攜帶資訊、mainParent值和遞回收集的最終result......
function recursivelyReassambleAndCollectChildOnlyItems(
{ mainParent, result }, { children, ...item }
) {
result = result.concat(children && children.reduce(
recursivelyReassambleAndCollectChildOnlyItems, {
// was:
// mainParent: mainParent ?? item.name,
/**
* OP quote:
* "... but I want to add parent name
* (which parentId is null) to every
* objects inside that respective parent."
*/
mainParent: item.parentId === null ? item.name : mainParent,
result: [],
}
).result || { mainParent, ...item });
return { mainParent, result };
}
const response = [{
'id': 4321,
'name': 'Education',
'parentId': null,
'children': [{
'id': 1234,
'name': 'category1',
'parentId': 4321,
'children': [{
'id': 8327548,
'name': '001',
'parentId': 1234,
}, {
'id': 8327549,
'name': '002',
'parentId': 1234,
}],
}, {
'id': 6786,
'name': 'Associations',
'parentId': 4321,
}, {
'id': 8262439,
'name': 'category1',
'parentId': 4321,
}, {
'id': 8245,
'name': 'Rights',
'parentId': 4321,
'children': [{
'id': 2447,
'name': 'Organizations',
'parentId': 8245,
}, {
'id': 9525,
'name': 'Services',
'parentId': 8245,
}, {
'id': 8448,
'name': 'Organizations',
'parentId': 8245,
}],
}, {
'id': 8262446,
'name': 'Women\'s Rights',
'parentId': 4321,
}],
}, {
'id': 21610,
'name': 'Agriculture',
'parentId': null,
'children': [{
'id': 3302,
'name': 'categoryABC',
'parentId': 21610,
'children': [{
'id': 85379,
'name': 'categoryABC - General',
'parentId': 3302,
}, {
'id': 85380,
'name': 'categoryABC Technology',
'parentId': 3302,
}],
}, {
'id': 8303,
'name': 'Fungicides',
'parentId': 21610,
'children': [{
'id': 8503,
'name': 'Fungicides - General',
'parentId': 8303,
}],
}],
}];
console.log(response
.reduce(recursivelyReassambleAndCollectChildOnlyItems, { result: [] })
.result
).as-console-wrapper { min-height: 100%!important; top: 0; }轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324813.html
標籤：javascript 数组 递归
上一篇：從URL中的鍵獲取陣列