循环遍历 json 树对象并创建新数组答案

【问题标题】：looping through a json tree object and create new array循环遍历 json 树对象并创建新数组
【发布时间】：2018-06-13 13:27:22
【问题描述】：

有没有一种好方法 JS/ES6 循环遍历一个对象及其子对象并创建新的对象树数组。

我有这个 json 树对象：

[
{
    id: "001",
    deparmentsIds: [
        "002",
        "003"
    ],
    details: {
        parentDeparmentsId: null,
        name: "Top"
    }
},
{
    id: "002",
    deparmentsIds:[
        "004"
    ],
    details: {
        parentDeparmentsId: ["001"],
        name: "Operations"
    }
},
{
    id: "003",
    deparmentsIds:[]
    details: {
        parentDeparmentsId: ["001"],
        name: "Support"
    }
},
{
    id: "004",
    deparmentsIds:[]
    details: {
        parentDeparmentsId: ["002"],
        name: "Support operations"
    }
}

]

我想创建如下所示的新对象数组树：

【问题讨论】：

JS 中的预期结构是什么，而不是 html？
html仅用于显示结构。
正确，我们得到了所需的结构。但是如何在JS中表示相同的是我们需要的。
我现在明白你的意思了......也许是这样的？ deparments = [{ top: [ "operations", "support" ] }] .. 最好的方法是什么？

标签： javascript loops ecmascript-6

【解决方案1】：

您可以使用reduce 和map 方法创建递归函数来创建嵌套对象结构。

const data = [{"id":"001","deparmentsIds":["002","003"],"details":{"parentDeparmentsId":null,"name":"Top"}},{"id":"002","deparmentsIds":["004"],"details":{"parentDeparmentsId":"001","name":"Operations"}},{"id":"003","deparmentsIds":[],"details":{"parentDeparmentsId":"001","name":"Support"}},{"id":"004","deparmentsIds":[],"details":{"parentDeparmentsId":"002","name":"Support operations"}}]

function tree(input, parentId) {
  return input.reduce((r, e) => {
    if (e.id == parentId || parentId == undefined && e.details.parentDeparmentsId == null) {
      const children = [].concat(...e.deparmentsIds.map(id => tree(input, id)))
      const obj = {
        [e.details.name]: children
      }
      r.push(obj)
    }
    return r;
  }, [])
}

const result = tree(data)
console.log(result)

【讨论】：

【解决方案2】：

您可以通过单个循环收集对象中的所有信息，并仅返回没有父节点的节点。

function getTree(data, root) {
    var o = {};
    data.forEach(({ id, details: { parentDeparmentsId: parent, name } }) => {
        var temp = { id, name };
        if (o[id] && o[id].children) {
            temp.children = o[id].children;
        }
        o[id] = temp;
        o[parent] = o[parent] || {};
        o[parent].children = o[parent].children || [];
        o[parent].children.push(temp);
    });
    return o[root].children;
}

var data = [{ id: "001", deparmentsIds: ["002", "003"], details: { parentDeparmentsId: null, name: "Top" } }, { id: "002", deparmentsIds: ["004"], details: { parentDeparmentsId: ["001"], name: "Operations" } }, { id: "003", deparmentsIds: [], details: { parentDeparmentsId: ["001"], name: "Support" } }, { id: "004", deparmentsIds: [], details: { parentDeparmentsId: ["002"], name: "Support operations" } }],
    tree = getTree(data, null);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：