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"
    }
];
}

具有新的ParentId和ChildId的循环树

1 个答案: