у меня есть плоские массивы, которые имеют родительские идентификаторы, и я хочу, чтобы он был вложенным и как родительский массив дерева родительский с javascript

Question

Привет, друзья, у меня есть плоский массив в реагировании, и у него есть родительское поле, и я хочу создать простой алгоритм javacsript или алгоритм реагирования с отображением, который сделает его вложенным и похожим на древовидный реляционный массив

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

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';
    });

Answer 2

Вы можете взять объект для сбора всех узлов и вернуть структуру данных из корневого узла.

Этот подход работает для более вложенных узлов, чем один уровень, и для несортированных данных.

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 3

Пожалуйста, проверьте мое решение

    
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 4

Здесь используются 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 5

Сначала вы должны выполнить цикл по массиву и найти что-нибудь с помощью 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);