从javascript

Question

我有一个固定的清单，如下所示。

flatList = [
    {
        id: "39000000", 
        parent: null, 
        description: "Electric Systems", 
        name: "39000000"
    },
    {
        id: "39120000", 
        parent: "39000000", 
        description: "Electrical Equipment", 
        name: "39120000"
    },
    {
        id: "39121000", 
        parent: "39120000", 
        description: "Power Conditioning", 
        name: "39121000"
    },  
    {
        id: "39121011", 
        parent: "39121000", 
        description: "Uninterruptible Power Supply", 
        name: "39121011"
    }
];

从平面列表构造树并将树存储在nestedList中的方法

nestedList = [];

getTree(flatList) {
    flatList.forEach(element => {
      if (!element.parent) {
        this.nestedList.push({ id: element.id, name: element.name, description: element.description, children: [] });
      } else {
        if (this.nestedList.findIndex(item => item.id === element.parent) === -1) {
          this.nestedList.push({
            id: element.id, name: element.name, description: element.description, children: [{ id: element.id, name: element.name, description: element.description, children: [] }]
          });
        } else {
          this.nestedList.find(item => item.id === element.parent).children.push(
            { id: element.id, name: element.name, description: element.description, children: [] }
          );
        }
      }
    });
  }

我得到的输出看起来像这样。

nestedList = [
    {
        id: "39000000", 
        name: "39000000",  
        description: "Electric Systems", 
        children: [{
            id: "39120000", 
            name: "39120000", 
            description: "Electrical Equipment", 
            children: []}
        ]
    },
    {
        id: "39121000", 
        name: "39121000", 
        description: "Power Conditioning", 
        children: [{
                id: "39121000", 
                name: "39121000", 
                description: "Power Conditioning", 
                children: []
            },
            {
                id: "39121011", 
                name: "39121011", 
                description: "Uninterruptible Power Supply", 
                children: []
            }       
        ]
    }   
]

所需的输出应为：

    nestedList = [
    {
      id: "39000000",
      name: "39000000",
      description: "Electric Systems",
      children: [{
        id: "39120000",
        name: "39120000",
        description: "Electrical Equipment",
        children: [{
          id: "39121000",
          name: "39121000",
          description: "Power Conditioning",
          children: [{
            id: "39121011",
            name: "39121011",
            description: "Uninterruptible Power Supply",
          }]
        }]
      }]
    }
  ]

我们将不胜感激。

Answer 1

这是更现代的代码（在其下进行解释）：

    const src = [
        {
            id: "39000000", 
            parent: null, 
            description: "Electric Systems", 
            name: "39000000"
        },
        {
            id: "39120000", 
            parent: "39000000", 
            description: "Electrical Equipment", 
            name: "39120000"
        },
        {
            id: "39121000", 
            parent: "39120000", 
            description: "Power Conditioning", 
            name: "39121000"
        },  
        {
            id: "39121011", 
            parent: "39121000", 
            description: "Uninterruptible Power Supply", 
            name: "39121011"
        }
    ];

const findChildren = 
(parents, referenceArray) => 
  parents.map(({ id, parent, description, name }) =>
    ({ id, description, name, children: findChildren(referenceArray.filter(i =>
      i.parent === id), src) }))

console.log(findChildren(src.filter(i => i.parent === null), src))

1. 代码查找根项目（src.filter(i => i.parent === null)）。
2. 这些项与作为源数组的引用数组一起传递给findChildren函数。
3. findChildren函数将旧对象映射为新格式（删除了parent，添加了children道具）...
4. ...，其中children属性是另一个findChildren函数调用的结果，但参数是下一个根，即当前id的子代。

P.S。这也是完全不变异的解决方案，即不会变异初始数组。

Answer 2

尝试此功能，希望对您有所帮助。

flatList = [
    {
        id: "39000000", 
        parent: null, 
        description: "Electric Systems", 
        name: "39000000"
    },
    {
        id: "39120000", 
        parent: "39000000", 
        description: "Electrical Equipment", 
        name: "39120000"
    },
    {
        id: "39121000", 
        parent: "39120000", 
        description: "Power Conditioning", 
        name: "39121000"
    },  
    {
        id: "39121011", 
        parent: "39121000", 
        description: "Uninterruptible Power Supply", 
        name: "39121011"
    }
];
function getUnflatten(arry) {

    data = arry.reduce(function (r, a) {
        var index = 0, node;
        if (node && Object.keys(node).length) {
            node.children = node.children || [];
            node.children.push(a);
        } else {
            while (index < r.length) {
                    a.children = (a.children || []).concat(r.splice(index, 1));
            }
            r.push(a);
        }
        return r;
    }, []);

    return data;
}

let tree = getUnflatten(flatList)
console.log(tree);