如何通过javascript将父子数组转换为json树结构

Question

我有一个对象数组，想通过 java 脚本函数将其转换为 JSON 树结构，然后在 vue js 项目中使用它。该页面有一个需要 JSON 树结构的 vuetify 树组件。我的数据已存储在具有父子结构的 MySql 表中。采样日期：[    {"id": 123, "parentid": 0, "name": "Mammals"},    {"id": 456, "parentid": 123, "name": "Dogs"},    {"id": 214, "parentid": 456, "name": "Labradors"},    {"id": 810, "parentid": 456, "name": "Pugs"},    {"id": 919, "parentid": 456, "name": "Terriers"}]结果 ：[    {        "id": 123,        "parentid": 0,        "name": "Mammals",        "children": [            {                "id": 456,                "parentid": 123,                "name": "Dogs",                "children": [                    {                        "id": 214,                        "parentid": 456,                        "name": "Labradors"                    },                    {                        "id": 810,                        "parentid": 456,                        "name": "Pugs"                    },                    {                        "id": 919,                        "parentid": 456,                        "name": "Terriers"                    }                ]            }        ]    }]来自这个地址的示例数据：https ://gist.github.com/smrchy/7040377

Answer 1

您可以reduce使用一个对象对数组执行操作来存储对每个对象的引用（用于添加子对象）和一个数组来存储结果。

const arr = [

    {"id": 123, "parentid": 0, "name": "Mammals"},

    {"id": 456, "parentid": 123, "name": "Dogs"},

    {"id": 214, "parentid": 456, "name": "Labradors"},

    {"id": 810, "parentid": 456, "name": "Pugs"},

    {"id": 919, "parentid": 456, "name": "Terriers"}

];

const {res} = arr.reduce((acc,curr)=>{

  if(acc.parentMap[curr.parentid]){

    (acc.parentMap[curr.parentid].children = 

           acc.parentMap[curr.parentid].children || []).push(curr);

  } else {

    acc.res.push(curr);

  }

  acc.parentMap[curr.id] = curr;

  return acc;

}, {parentMap: {}, res: []});

console.log(res);

Answer 2

我发现更容易理解：

• 创建数组中所有可能 id 的对象/字典，以及

• 然后在将孩子附加到父母后通过字典：

const array = [

      { id: 919, parentid: 456, name: "Terriers" },

      { id: 456, parentid: 123, name: "Dogs" },

      { id: 214, parentid: 456, name: "Labradors" },

      { id: 810, parentid: 456, name: "Pugs" },

      { id: 123, parentid: 0, name: "Mammals" },

    ];

    

    let tree = [], arrayDictionary = {};

    

    // First map the nodes of the array to an object/dictionary where the key is their id

    array.forEach((cat) => {

      arrayDictionary[cat.id] = cat;

      arrayDictionary[cat.id]["children"] = [];

    });

    

    

    // for each entry in the dictionary

    for (var entry in arrayDictionary) {

      // get all the data for this entry in the dictionary

      const mappedElem = arrayDictionary[entry];

      // if the element has a parent, add it

      if (

        mappedElem.parentid && // the dictionary has a parent

        arrayDictionary[mappedElem["parentid"]] // and that parent exists

        ) {

        arrayDictionary[mappedElem["parentid"]]["children"].push(mappedElem);

      }

      // else is at the root level (parentid = null or 0)

      else {

        tree.push(mappedElem);

      }

    }

    

    console.log(tree);