[英]Build flat array with levels from tree array in javascript
I have the following array tree in javascript:我在javascript中有以下数组树:
[
{
"id": 1,
"parentId": null,
"description": "Item 1",
"value": 0,
"children": [
{
"id": 2,
"parentId": 1,
"description": "Item 1.1",
"value": 0,
"children": [
{
"id": 3,
"parentId": 2,
"description": "Item 1.1.1",
"value": 0,
"children": []
}
]
}
]
},
{
"id": 4,
"parentId": null,
"description": "Item 2",
"value": 0,
"children": [
{
"id":5,
"parentId": 4,
"description": "Item 2.1",
"value": 0,
"children": []
}
]
}
]
I want to turn it into a flat one with it's levels, like this (see level attribute):我想把它变成一个带有它的水平的平面,像这样(见水平属性):
[
{
"id":1,
"parentId": null,
"description":"Item 1",
"value":0,
"level": "1"
},
{
"id":2,
"parentId": 1,
"description":"Item 1.1",
"value":0,
"level": "1.1"
},
{
"id":3,
"parentId": 2,
"description":"Item 1.1.1",
"value":0,
"level": "1.1.1"
},
{
"id":4,
"parentId": null,
"description":"Item 2",
"value":0,
"level": "2"
},
{
"id":5,
"parentId": 4,
"description":"Item 2.1",
"value":0,
"level": "2.1"
}
]
What's the best way to do this regardless of depth?无论深度如何,最好的方法是什么?
PS: I have the flat one too, but without "level" attribute and the proposal is to add this attribute based on parentId and sort list by it, like following: PS:我也有扁平的,但没有“级别”属性,建议根据 parentId 添加此属性并按其排序列表,如下所示:
Item 1项目 1
Item 1.1项目 1.1
Item 1.1.1项目 1.1.1
Item 2第 2 项
Item 2.1项目 2.1
If you don't want to limit the solution by the depth of the array, then I suggest not to use recursion.如果您不想通过数组的深度来限制解决方案,那么我建议不要使用递归。
const solution = data => { const stack = data.map((item, index) => ({ ...item, level: `${index + 1}` })) const result = [] while (stack.length) { const item = stack.pop() const { children, ...restItem } = item stack.push(...item.children.map((child, index) => ({ ...child, level: `${item.level}.${index + 1}` }))) result.push(restItem) } return result } const data = [ { "id": 1, "parentId": null, "description": "Item 1", "value": 0, "children": [ { "id": 2, "parentId": 1, "description": "Item 1.1", "value": 0, "children": [ { "id": 3, "parentId": 2, "description": "Item 1.1.1", "value": 0, "children": [] } ] } ] }, { "id": 4, "parentId": null, "description": "Item 2", "value": 0, "children": [ { "id":5, "parentId": 4, "description": "Item 2.1", "value": 0, "children": [] } ] } ] console.log(solution(data))
If you recursively loop through your array (assuming that children
will always be the key), something like this will work.如果你递归地遍历你的数组(假设
children
永远是关键),这样的事情会起作用。
const arr = [ { "id": 1, "parentId": null, "description": "Item 1", "value": 0, "children": [ { "id": 2, "parentId": 1, "description": "Item 1.1", "value": 0, "children": [ { "id": 3, "parentId": 2, "description": "Item 1.1.1", "value": 0, "children": [] } ] } ] }, { "id": 4, "parentId": null, "description": "Item 2", "value": 0, "children": [ { "id":5, "parentId": 4, "description": "Item 2.1", "value": 0, "children": [] } ] } ] const newArray = []; const flatten = (item, parentIdx) => { // separate parent from children item.forEach(({ children, ...child}, idx) => { // create level const level = `${parentIdx ? `${parentIdx}.` : ''}${idx + 1}`; // add parent to new array newArray.push({...child, level}); // recursively flatten children flatten(children, level); }) } flatten(arr) console.log(newArray)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.