使用 JavaScript 从 JSON 构建树形数组

假设，我们在 JavaScript 中有以下数组 −

const arr = [{
   "code": "2",
   "name": "PENDING"
},
{
   "code": "2.2",
   "name": "PENDING CHILDREN"
},
{
   "code": "2.2.01.01",
   "name": "PENDING CHILDREN CHILDREN"
},
{
   "code": "2.2.01.02",
   "name": "PENDING CHILDREN CHILDREN02"
},
{
   "code": "1",
   "name": "ACTIVE"
},
{
   "code": "1.1",
   "name": "ACTIVE CHILDREN"
},
{
   "code": "1.1.01",
   "name": "ACTIVE CHILDREN CHILDREN"
}];

我们需要编写一个 JavaScript 函数来接收一个这样的数组。该函数应根据对象的"name"属性从该数组构建一个树结构。

因此，对于上述数组，输出应如下所示 −

const output = [{
   "code": "2",
   "name": "PENDING",
   "children": [{
      "code": "2.2",
      "name": "PENDING CHILDREN",
      "children": [{
         "code": "2.2.01.01",
         "name": "PENDING CHILDREN CHILDREN"
      },
      {
         "code": "2.2.01.02",
         "name": "PENDING CHILDREN CHILDREN02"
      }]
   }]
},
{
   "code": "1",
   "name": "ACTIVE",
   "children": [{
      "code": "1.1",
      "name": "ACTIVE CHILDREN",
      "children": [{
         "code": "1.1.01",
         "name": "ACTIVE CHILDREN CHILDREN"
      }]
   }]
}];

示例

其代码为 −

const arr = [{
   "code": "2",
   "name": "PENDING"
},
{
   "code": "2.2",
   "name": "PENDING CHILDREN"
},
{
   "code": "2.2.01.01",
   "name": "PENDING CHILDREN CHILDREN"
},
{
   "code": "2.2.01.02",
   "name": "PENDING CHILDREN CHILDREN02"
},
{
   "code": "1",
   "name": "ACTIVE"
},
{
   "code": "1.1",
   "name": "ACTIVE CHILDREN"
},
{
   "code": "1.1.01",
   "name": "ACTIVE CHILDREN CHILDREN"
}];
const transformToTree = (arr, root = '') => {
   let map = {}, last = [root], level = 0;
   map[root] = {};
   arr.forEach(el => {
      let parent = root;
      while (level && last[level].length >= el.code.length) {
         level--;
      };
      parent = last[level];
      level++;
      last.length = level;
      last.push(el.code);
      map[el.code] = el;
      map[parent].children = map[parent].children || [];
      map[parent].children.push(el);
   });
   return map[root].children;
};
console.log(JSON.stringify(transformToTree(arr), undefined, 4));

输出

控制台中的输出将是 −

[
   {
      "code": "2",
      "name": "PENDING",
      "children": [
         {
            "code": "2.2",
            "name": "PENDING CHILDREN",
            "children": [
               {
                  "code": "2.2.01.01",
                  "name": "PENDING CHILDREN CHILDREN"
               },
               {
                  "code": "2.2.01.02",
                  "name": "PENDING CHILDREN CHILDREN02"
               }
            ]
         }
      ]
   },
   {
      "code": "1",
      "name": "ACTIVE",
      "children": [
         {
            "code": "1.1",
            "name": "ACTIVE CHILDREN",
            "children": [
               {
                  "code": "1.1.01",
                  "name": "ACTIVE CHILDREN CHILDREN"
               }
            ]
         }
      ]
   }
]

相关文章

• JavaScript 中的 JSON 组对象
• 在 JavaScript 中从嵌套 JSON 对象获取键的值
• 在 JavaScript 中为 JSON 对象中的每个条目添加唯一 ID
• 在 JavaScript 中将 JSON 数组转换为普通 json
• JavaScript:通过链接两个数组创建一个 JSON 对象数组
• 根据多个过滤器 JavaScript 从 JSON 数据计算平均值

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/