Question

嗨，朋友，我在react中有一个平面数组，它有一个父字段，我想制作一个简单的javacsript算法或带有映射的react算法，并使其嵌套并像树型关系数组

this.state = {
    Catgeory: [
        {id:'1' , name:'parent_1' , parentId:'0'},
        {id:'2' , name:'child_1' , parentId:'1'},
        {id:'3' , name:'child_2' , parentId:'1'},

        {id:'4' , name:'parent_2' , parentId:'0'},
        {id:'5' , name:'child_1' , parentId:'4'},
        {id:'6' , name:'child_2' , parentId:'4'},
    ],
}

我希望这个数组像这样，然后如果发生这种情况，我可以用自己的方式映射到该数组中...

Catgeory: [
    {
        id:'1' ,
        name:'parent_1' ,
        parentId:'0',
        subCategory: [{
            id:'2' ,
            name:'child_1',
            parentId:'1'
        }, {
            id:'3' ,
            name:'child_2' ,
            parentId:'1'
        }]
    }, {
        id:'4' ,
        name:'parent_2' ,
        parentId:'0',
        subCategory: [{
            id:'5' ,
            name:'child_1',
            parentId:'4'
        }, {
            id:'6' ,
            name:'child_2' ,
            parentId:'4'
        }]
    },
]

Answer 1

首先，您将遍历数组并使用parentId === 0查找任何内容，使用这些元素创建一个新数组，并为每个数组添加一个“子类别”数组。

然后，您将遍历，找到parentId !== 0的位置，将父元素与新元素匹配，然后将新元素推入父元素subcategory属性

[edit]类似这样：

state= {
        Category:[
                  {id:'1' , name:'parent_1' , parentId:'0'},
                  {id:'2' , name:'child_1' , parentId:'1'},
                  {id:'3' , name:'child_2' , parentId:'1'},

                  {id:'4' , name:'parent_2' , parentId:'0'},
                  {id:'5' , name:'child_1' , parentId:'4'},
                  {id:'6' , name:'child_2' , parentId:'4'},


                 ],
    }


var parents = state.Category.filter(c => c.parentId === '0').map(o => {
    var parent = Object.assign({}, o);
    parent.subCategory = [];
    return parent;
})


state.Category.filter(c => c.parentId !== '0').forEach(o => {
    var parent = parents.find(p => p.id === o.parentId);
    parent.subCategory.push(Object.assign({}, o));
})

console.log(parents);

Answer 2

请检查我的解决方案

    
var parents= this.state.Catgeory.filter(cat => cat.parentId=='0');
for(i in parents){
    let id=parents[i].id;
    parents[i].subCategory= states.Catgeory.filter(cat => cat.parentId==id);
}
this.state.Catgeory=parents;

Answer 3

这是使用forEach()，find()和filter()的地方。在循环遍历数组时，您可以找到添加的父对象将其推入parent.subCategory。

let category = 
[
    {id:'1' , name:'parent_1' , parentId:'0'},
    {id:'2' , name:'child_1' , parentId:'1'},
    {id:'3' , name:'child_2' , parentId:'1'},

    {id:'4' , name:'parent_2' , parentId:'0'},
    {id:'5' , name:'child_1' , parentId:'4'},
    {id:'6' , name:'child_2' , parentId:'4'},


]
category.forEach(item =>  {
  if(item.parentId !== '0'){
    let parent = category.find(a => item.parentId === a.id)
    parent.subCategory = parent.subCategory || [];
    parent.subCategory.push(item);
  }
})
category = category.filter(({parentId}) => parentId === '0')
console.log(category)

Answer 4

您可以使用一个对象来收集所有节点，然后从根节点返回数据结构。

此方法适用于多于一个级别的depper嵌套节点和未排序的数据。

var data = [{ id: '1', name: 'parent_1', parentId: '0' }, { id:'2', name: 'child_1', parentId: '1' }, { id: '3', name: 'child_2', parentId: '1' }, { id: '4', name: 'parent_2', parentId: '0' }, { id: '5', name: 'child_1', parentId: '4' }, { id: '6', name: 'child_2', parentId: '4' }],
    tree = function (data, root) {
        var o = {};
        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children;
            o[a.id] = a;
            o[a.parentId] = o[a.parentId] || {};
            o[a.parentId].children = o[a.parentId].children || [];
            o[a.parentId].children.push(a);
        });
        return o[root].children;
    }(data, '0');

console.log(tree);

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

Answer 5

var flatArray =
[
                  {id:'1' , name:'parent_1' , parentId:'0'},
                  {id:'2' , name:'child_1' , parentId:'1'},
                  {id:'3' , name:'child_2' , parentId:'1'},
                  {id:'4' , name:'parent_2' , parentId:'0'},
                  {id:'5' , name:'child_1' , parentId:'4'},
                  {id:'6' , name:'child_2' , parentId:'4'}
                 ];

    for (var a=0; a<flatArray.length; a++) {
        for (var b=0; b<flatArray.length; b++) {
        if(flatArray[a].parentId === flatArray[b].id) {
            if(!!flatArray[b].subCategory){
          flatArray[b].subCategory.push(flatArray[a])
          } else {
          flatArray[b].subCategory = [flatArray[a]]
          }
        }
      }
    }


    var finalArray = flatArray.filter(a => {
        return typeof(a.subCategory) !== 'undefined';
    });

我有一个具有父ID的平面数组，我想使其嵌套，并且像一个带有javascript的树父子数组

5 个答案: