javascript - 具有新 ParentId 和 ChildId 的循环树

Question

我有一个具有多层嵌套的层次结构树 JSON。当我尝试循环 JSON 以在 UI 中显示树结构时。我最终得到了循环冗余，因为父 ID 在不同级别上是相同的。我需要为parentID和ID添加唯一标识符，这样在递归调用中它就不会陷入无限循环。

示例 JSON:

[
  {
    "id": "12",
    "text": "Man"
  },
  {
    "id": "6",
    "parentId": "12",
    "text": "Boy"
  },
  {
    "id": "9",
    "parentId": "6",
    "text": "Boy-Boy"
  },
  {
    "id": "13",
    "parentId": "9",
    "text": "Boy-Boy-Boy"
  },
  {
    "id": "7",
    "parentId": "12",
    "text": "Other"
  },
  {
    "id": "6",
    "parentId": "7",
    "text": "Boy"
  },
  {
    "id": "9",
    "parentId": "6",
    "text": "Boy-Boy"
  },
  {
    "id": "13",
    "parentId": "9",
    "text": "Boy-Boy-Boy"
  }

我尝试过为每个级别添加深度，但无法维持 ParentId 和 Id 关系。

var depthArray = []

function addDepth(arr, depth = 0) {
  arr.forEach(obj => {


  obj.id =  obj.id + '-' + depth;
  if(obj.children !== undefined) {
  addDepth(obj.children, depth + 1)
}})
return arr;
}

[
  {
    "id": "12",
    "text": "Man"
  },
  {
    "id": "6",
    "parentId": "12",
    "text": "Boy"
  },
  {
    "id": "9",
    "parentId": "6",
    "text": "Boy-Boy"
  },
  {
    "id": "13",
    "parentId": "9",
    "text": "Boy-Boy-Boy"
  },
  {
    "id": "7",
    "parentId": "12",
    "text": "Other"
  },
  {
    "id": "6-1",
    "parentId": "7",
    "text": "Boy"
  },
  {
    "id": "9-1",
    "parentId": "6-1",
    "text": "Boy-Boy"
  },
  {
    "id": "13-1",
    "parentId": "9-1",
    "text": "Boy-Boy-Boy"
  }
]

Answer 1

你的递归不起作用，那怎么办？但不知道如何重命名 ID:

'use strict';
function addDepth(arr, id, depth) {
  if(depth === undefined) depth = 0;
  if(id !== undefined)
    arr.forEach(obj => {

        if(id == obj.parentId) {
        if(depth) obj.parentId += '-' + depth;
        addDepth(arr, obj.id, depth + 1)
      }
    })
  else arr.forEach(obj => { addDepth(arr, obj.id, depth); });
  return arr;
}

console.log(addDepth(
[
  {
    "id": "12",
    "text": "Man"
  },
  {
    "id": "6",
    "parentId": "12",
    "text": "Boy"
  },
  {
    "id": "9",
    "parentId": "6",
    "text": "Boy-Boy"
  },
  {
    "id": "13",
    "parentId": "9",
    "text": "Boy-Boy-Boy"
  },
  {
    "id": "7",
    "parentId": "12",
    "text": "Other"
  },
  {
    "id": "6",
    "parentId": "7",
    "text": "Boy"
  },
  {
    "id": "9",
    "parentId": "6",
    "text": "Boy-Boy"
  },
  {
    "id": "13",
    "parentId": "9",
    "text": "Boy-Boy-Boy"
  }
]
));

很难猜测结构可能是什么样子，但手工制作了一个假设的输出，然后类似的代码 - 仅查找(不知道如何区分具有parentId差异的相同记录):

12          Man
12 6        Man Boy
12 6 9      Man Boy Boy-Boy
12 6 9 13   Man Boy Boy-Boy Boy-Boy-Boy
12 7        Man Other
12 7        Man Other Boy
12 7 6 9    Man Other Boy Boy-Boy
12 7 6 9 13 Man Other Boy Boy-Boy Boy-Boy-Boy

var data = GetData();
var arr = [data[0].text], parent;
for(var i=0;i<data.length;i++) {
    if(parent = data[i].parentId) {
        arr.push(data[i].text); // we have parentId, so iterate back
        for(var j=i;j >= 0;j--) {
            if(data[j].id == parent) {
                arr.push(data[j].text); // & colect text properties
                if(data[j].parentId) {
                    parent = data[j].parentId;
                    j = i;
                }
            }
        }
    }
    console.log(arr.reverse().join(" -> "));
    arr = [];
}

function GetData() { return [
    {
      "id": "12",
      "text": "Man"
    },
    {
      "id": "6",
      "parentId": "12",
      "text": "Boy"
    },
    {
      "id": "9",
      "parentId": "6",
      "text": "Boy-Boy"
    },
    {
      "id": "13",
      "parentId": "9",
      "text": "Boy-Boy-Boy"
    },
    {
      "id": "7",
      "parentId": "12",
      "text": "Other"
    },
    {
      "id": "6",
      "parentId": "7",
      "text": "Boy"
    },
    {
      "id": "9",
      "parentId": "6",
      "text": "Boy-Boy"
    },
    {
      "id": "13",
      "parentId": "9",
      "text": "Boy-Boy-Boy"
    }
];
}