JavaScript:将具有父键的对象数组转换为父/子树(包括没有父对象的对象)

标签 javascript arrays object spread-syntax

我有一个包含父键的对象列表,它描述了多个级别的嵌套父/子关系。

const table =[
    {
        "id": 791,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {
        "id": 790,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {
        "id": 845,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {   
        "id": 844,
        "sortOrder": 0,
        "parentCategoryId": 842
    },
    {   
        "id": 802,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {   
        "id": 788,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 863,
        "sortOrder": 0,
        "parentCategoryId": 863
    },
    {    
        "id": 858,
        "sortOrder": 0,
        "parentCategoryId": 858
    },
    {    
        "id": 867,
        "sortOrder": 0,
        "parentCategoryId": 867
    },
    {    
        "id": 871,
        "sortOrder": 0,
        "parentCategoryId": 867
    },
    {    
        "id": 801,
        "name": "Tickets",
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 792,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 797,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 789,
        "name": "Hot food",
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 798,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 671,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 833,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 796,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 843,
        "sortOrder": 0,
        "parentCategoryId": 842
    },
    {    
        "id": 840,
        "sortOrder": 0,
        "parentCategoryId": 793
    },
    {    
        "id": 868,
        "sortOrder": 0,
        "parentCategoryId": 868
    },
    {    
        "id": 851,
        "sortOrder": 0,
        "parentCategoryId": 851
    },
    {    
        "id": 839,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 793,
        "sortOrder": 0,
        "parentCategoryId": 839
    },
    {    
        "id": 859,
        "sortOrder": 0,
        "parentCategoryId": 859
    },
    {   
        "id": 805,
        "sortOrder": 0,
        "parentCategoryId": 859
    },
    {    
        "id": 856,
        "name": "DRINKS",
        "sortOrder": 0,
        "parentCategoryId": 805
    },
    {    
        "id": 870,
        "sortOrder": 0,
        "parentCategoryId": 856
    },
    {    
        "id": 787,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 786,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 799,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 852,
        "sortOrder": 0,
        "parentCategoryId": 852
    },
    {    
        "id": 795,
        "name": "Gents fragrance",
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 864,
        "sortOrder": 0,
        "parentCategoryId": 864
    },
    {   
        "id": 854,
        "sortOrder": 0,
        "parentCategoryId": 854
    },
    {    
        "id": 865,
        "sortOrder": 0,
        "parentCategoryId": 865
    },
    {    
        "id": 869,
        "name": "GFI",
        "sortOrder": 0,
        "parentCategoryId": 869
    },
    {    
        "id": 785,
        "sortOrder": 0,
        "parentCategoryId": 833
    }
]

问题是我没有带 0 的根父 ID。我想在一个数组中排序,该数组显示在第一级项目中,其中 id 匹配 parentCategoryId,什么意思是他们每个都是一个根并且比他们每个人都有 child 中的 child 。

这是我得到的结果,但很难做到这一点:

var root = { cid: 0, parent_id: null, children: []};
var node_list = { 0 : root};

     for (var i = 0; i < table.length; i++) {

       console.log('updated list', node_list)
       console.log('item in cat', table[i])

       // check if parent ID exsits in the list
       if (!node_list[table[i].parentCategoryId]) {

         console.log('not in the list');
         console.log('node_list[table[i].parentCategoryId]', table[i].parentCategoryId)
         if (table[i].parentCategoryId === table[i].cid) {
           console.log('it is the root');
           node_list[table[i].cid] = table[i];
         }    

       } else {

         const item = table[i];
         console.log('item is ', item)

         node_list[table[i].parentCategoryId].children = {
           ...node_list[table[i].parentCategoryId].children,
           ...item
         };
       }
     }

预期结果:

const table =[
    {  
        "id": 791,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 790,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 845,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 844,
        "sortOrder": 0,
        "parentCategoryId": 842
    },
    {    
        "id": 802,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 788,
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 863,
        "sortOrder": 0,
        "parentCategoryId": 863
    },
    {    
        "id": 858,
        "sortOrder": 0,
        "parentCategoryId": 858
    },
    {    
        "id": 867,
        "sortOrder": 0,
        "parentCategoryId": 867
    },
    {    
        "id": 871,
        "sortOrder": 0,
        "parentCategoryId": 867
    },
    {    
        "id": 801,
        "sortOrder": 0,
        "parentCategoryId": 847
    },    
    {    
        "id": 797,
        "sortOrder": 0,
        "parentCategoryId": 847,
        children:[
            {    
                "id": 792,
                "sortOrder": 0,
                "parentCategoryId": 797,
                children:[
                    {
                        "id": 671,
                        "sortOrder": 0,
                        "parentCategoryId": 792
                    },
                ]
            },
        ]
    },
    {    
        "id": 789,
        "name": "Hot food",
        "sortOrder": 0,
        "parentCategoryId": 833
    },
    {    
        "id": 798,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {    
        "id": 833,
        "sortOrder": 0,
        "parentCategoryId": 833,
        children:[
            {    
                "id": 785,
                "sortOrder": 0,
                "parentCategoryId": 833
            },
            {
                "id": 786,
                "sortOrder": 0,
                "parentCategoryId": 833
            },
            {
                "id": 787,
                "sortOrder": 0,
                "parentCategoryId": 833
            },
        ]
    },
    {   
        "id": 796,
        "sortOrder": 0,
        "parentCategoryId": 847
    },
    {   
        "id": 843,
        "sortOrder": 0,
        "parentCategoryId": 842
    },
    {   
        "id": 840,
        "sortOrder": 0,
        "parentCategoryId": 793
    },
    {    
        "id": 868,
        "sortOrder": 0,
        "parentCategoryId": 868
    },
    {    
        "id": 851,
        "sortOrder": 0,
        "parentCategoryId": 851
    },
    {    
        "id": 839,
        "sortOrder": 0,
        "parentCategoryId": 847,
        children:[
            {
                "id": 793,
                "sortOrder": 0,
                "parentCategoryId": 839,
                children:[
                    {    
                        "id": 870,
                        "sortOrder": 0,
                        "parentCategoryId": 856
                    },
                ]
            },
        ]
    },
    {    
        "id": 805,
        "sortOrder": 0,
        "parentCategoryId": 859,
        children:[
            {
                "id": 856,
                "sortOrder": 0,
                "parentCategoryId": 805
            },
            {    
                "id": 859,
                "sortOrder": 0,
                "parentCategoryId": 805
            },
        ]
    },      
]

最佳答案

您似乎想向初始数组中的对象添加一个带有值数组的 children 键,其中 id 值对应于一个或多个 来自数组中其他对象的 parentCategoryId 值 - 并且任何对象都不应作为嵌套对象数组中的父项或子项重复。

您可以映射 数组以追加子项,然后过滤 以仅返回根父项(和孤立项)。例如(如果您想查看输出,则示例下方的工作片段):

const ids = table.map((x) => x.id);
const result = table.map((parent) => {
  const children = table.filter((child) => {
    if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) {
      return true;
    }

    return false;
  });

  if (children.length) {
    parent.children = children;
  }

  return parent;
}).filter((obj) => {
  if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) {
    // include ultimate parents and orphans at root
    return true;
  }

  return false;
});

const table = [{ "id": 791, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 790, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 845, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 844, "sortOrder": 0, "parentCategoryId": 842 }, { "id": 802, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 788, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 863, "sortOrder": 0, "parentCategoryId": 863 }, { "id": 858, "sortOrder": 0, "parentCategoryId": 858 }, { "id": 867, "sortOrder": 0, "parentCategoryId": 867 }, { "id": 871, "sortOrder": 0, "parentCategoryId": 867 }, { "id": 801, "name": "Tickets", "sortOrder": 0, "parentCategoryId": 847 }, { "id": 792, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 797, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 789, "name": "Hot food", "sortOrder": 0, "parentCategoryId": 833 }, { "id": 798, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 671, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 833, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 796, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 843, "sortOrder": 0, "parentCategoryId": 842 }, { "id": 840, "sortOrder": 0, "parentCategoryId": 793 }, { "id": 868, "sortOrder": 0, "parentCategoryId": 868 }, { "id": 851, "sortOrder": 0, "parentCategoryId": 851 }, { "id": 839, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 793, "sortOrder": 0, "parentCategoryId": 839 }, { "id": 859, "sortOrder": 0, "parentCategoryId": 859 }, { "id": 805, "sortOrder": 0, "parentCategoryId": 859 }, { "id": 856, "name": "DRINKS", "sortOrder": 0, "parentCategoryId": 805 }, { "id": 870, "sortOrder": 0, "parentCategoryId": 856 }, { "id": 787, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 786, "sortOrder": 0, "parentCategoryId": 833 }, { "id": 799, "sortOrder": 0, "parentCategoryId": 847 }, { "id": 852, "sortOrder": 0, "parentCategoryId": 852 }, { "id": 795, "name": "Gents fragrance", "sortOrder": 0, "parentCategoryId": 847 }, { "id": 864, "sortOrder": 0, "parentCategoryId": 864 }, { "id": 854, "sortOrder": 0, "parentCategoryId": 854 }, { "id": 865, "sortOrder": 0, "parentCategoryId": 865 }, { "id": 869, "name": "GFI", "sortOrder": 0, "parentCategoryId": 869 }, { "id": 785, "sortOrder": 0, "parentCategoryId": 833 }];
const ids = table.map((x) => x.id);
const result = table.map((parent) => {
  const children = table.filter((child) => {
    if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) {
      return true;
    }
    
    return false;
  });
  
  if (children.length) {
    parent.children = children;
  }
  
  return parent;
}).filter((obj) => {
  if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) {
    // include ultimate parents and orphans at root
    return true;
  }
  
  return false;
});

// stringify just to flatten out SO console result for easier result scanning
console.log(JSON.stringify(result));

关于JavaScript:将具有父键的对象数组转换为父/子树(包括没有父对象的对象),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52607922/

相关文章:

c++ - MPI,更大的阵列

c - 传递给函数后打印数组时出现段错误,请解释行为

php - 从对象数组创建表格

c++ - 访问用户定义类型数组的特定属性

javascript - 如何在使用 window.onerror 处理语句 1 的错误时继续语句 2

javascript - jQuery::图像元素列表。尝试将它们制作成幻灯片

php - 使用 php 创建 javascript 数组以从目录中获取图像

javascript - 函数在第一次点击时不触发

javascript - Google 自动完成器位置在 Angular 2 的子组件中不起作用

javascript - 我正在尝试比较 javascript 对象是否相同