JavaScript'te düz diziden ağaç dizisi oluşturun


134

Daha sonra bir ağaç inşa etmek için javascript ile hiyerarşik hale getirmek için kullanmam gereken karmaşık bir json dosyam var. Her json girişinde şunlar bulunur: id: benzersiz bir id, parentId: ebeveyn düğümün kimliği (düğüm ağacın kökü ise 0'dır) seviyesi: ağaçtaki derinlik seviyesi

Json verileri zaten "sıralanmıştır". Demek istediğim, bir girişin kendi üzerinde bir ana düğüm veya kardeş düğüm ve kendi altında bir çocuk düğüm veya bir kardeş düğüm olacaktır.

Girdi:

{
    "People": [
        {
            "id": "12",
            "parentId": "0",
            "text": "Man",
            "level": "1",
            "children": null
        },
        {
            "id": "6",
            "parentId": "12",
            "text": "Boy",
            "level": "2",
            "children": null
        },
                {
            "id": "7",
            "parentId": "12",
            "text": "Other",
            "level": "2",
            "children": null
        },
        {
            "id": "9",
            "parentId": "0",
            "text": "Woman",
            "level": "1",
            "children": null
        },
        {
            "id": "11",
            "parentId": "9",
            "text": "Girl",
            "level": "2",
            "children": null
        }
    ],
    "Animals": [
        {
            "id": "5",
            "parentId": "0",
            "text": "Dog",
            "level": "1",
            "children": null
        },
        {
            "id": "8",
            "parentId": "5",
            "text": "Puppy",
            "level": "2",
            "children": null
        },
        {
            "id": "10",
            "parentId": "13",
            "text": "Cat",
            "level": "1",
            "children": null
        },
        {
            "id": "14",
            "parentId": "13",
            "text": "Kitten",
            "level": "2",
            "children": null
        },
    ]
}

Beklenen çıktı :

{
    "People": [
        {
            "id": "12",
            "parentId": "0",
            "text": "Man",
            "level": "1",
            "children": [
                {
                    "id": "6",
                    "parentId": "12",
                    "text": "Boy",
                    "level": "2",
                    "children": null
                },
                {
                    "id": "7",
                    "parentId": "12",
                    "text": "Other",
                    "level": "2",
                    "children": null
                }   
            ]
        },
        {
            "id": "9",
            "parentId": "0",
            "text": "Woman",
            "level": "1",
            "children":
            {

                "id": "11",
                "parentId": "9",
                "text": "Girl",
                "level": "2",
                "children": null
            }
        }

    ],    

    "Animals": [
        {
            "id": "5",
            "parentId": "0",
            "text": "Dog",
            "level": "1",
            "children": 
                {
                    "id": "8",
                    "parentId": "5",
                    "text": "Puppy",
                    "level": "2",
                    "children": null
                }
        },
        {
            "id": "10",
            "parentId": "13",
            "text": "Cat",
            "level": "1",
            "children": 
            {
                "id": "14",
                "parentId": "13",
                "text": "Kitten",
                "level": "2",
                "children": null
            }
        }

    ]
}

2
Bunu yapmanın birkaç yolu var, henüz bir şey denedin mi?
bfavaretto

Ben varsayalım parentIdait 0araçlarla hiçbir üst kimliği ve üst tabaka olmalıdır.
Donnie D'Amato

Genellikle bu tür görevler kapsamlı çalışma bilgisi nesneleri gerektirir. Güzel soru
Gangadhar JANNU

Yanıtlar:


158

Bir harita arama kullanırsanız etkili bir çözüm var. Ebeveynler her zaman çocuklarının önüne gelirse, iki for-döngüsünü birleştirebilirsiniz. Birden fazla kökü destekler. Sarkan dallarda hata verir, ancak bunları görmezden gelmek için değiştirilebilir. Üçüncü taraf bir kitaplık gerektirmez. Anladığım kadarıyla en hızlı çözüm bu.

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

var entries = [{
    "id": "12",
    "parentId": "0",
    "text": "Man",
    "level": "1",
    "children": null
  },
  {
    "id": "6",
    "parentId": "12",
    "text": "Boy",
    "level": "2",
    "children": null
  },
  {
    "id": "7",
    "parentId": "12",
    "text": "Other",
    "level": "2",
    "children": null
  },
  {
    "id": "9",
    "parentId": "0",
    "text": "Woman",
    "level": "1",
    "children": null
  },
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
];

console.log(list_to_tree(entries));

Karmaşıklık teorisiyle ilgileniyorsanız, bu çözüm Θ (n log (n)). Özyinelemeli filtre çözümü, büyük veri kümeleri için bir problem olabilecek Θ (n ^ 2) 'dir.


28
Unutmayın ki bu çözümle, önce ebeveynlerin haritaya itildiğinden emin olmak için düğümlerinizin özel olarak sıralanması gerekir, aksi takdirde arama işlemi hata verir ... bu nedenle ya onları level özelliğinde sıralamanız gerekir ya da ihtiyacınız olur önce onları haritaya itmek için. ve arama için ayrı bir for döngüsü kullanın. (sıralamayı tercih ederim, ancak bir level özelliğiniz olmadığında ayrı döngüler bir seçenek olabilir)
Sander

İlk başta, ek bilgiye sahip olmanın, örneğin dizinin sonraki atalar olduğu [1, 5, 6] gibi bir yolun içinde verimli bir şekilde kullanılamadığını şaşırtıcı buldum. Ama koda baktığımda, bunun O (n) olduğuna inandığım için
mantıklı geliyor

1
İyi cevaba rağmen karmaşık. Cevabımı sadece iki satır kodu için uygulayın: bağlantı
Iman Bahrampour

Lütfen bu çözümün neden Θ (n log (n)) olduğunu açıklar mısınız, O (n) zaman alıyor gibi görünüyor.
amrender singh

For-loop içindeki @amrendersingh, map(teoride) O (log n) olan bir hash aramadır .
Halcyon

72

@Sander tarafından belirtildiği gibi, @ Halcyon'un cevabı önceden sıralanmış bir dizi varsayar, aşağıdakiler bunu yapmaz. (Bununla birlikte, vanilla javascript ile yazılabilmesine rağmen, alt-çekirdek.js yüklediğiniz varsayılmaktadır):

kod

// Example usage
var arr = [
    {'id':1 ,'parentid' : 0},
    {'id':2 ,'parentid' : 1},
    {'id':3 ,'parentid' : 1},
    {'id':4 ,'parentid' : 2},
    {'id':5 ,'parentid' : 0},
    {'id':6 ,'parentid' : 0},
    {'id':7 ,'parentid' : 4}
];

unflatten = function( array, parent, tree ){
    tree = typeof tree !== 'undefined' ? tree : [];
    parent = typeof parent !== 'undefined' ? parent : { id: 0 };
        
    var children = _.filter( array, function(child){ return child.parentid == parent.id; });
    
    if( !_.isEmpty( children )  ){
        if( parent.id == 0 ){
           tree = children;   
        }else{
           parent['children'] = children
        }
        _.each( children, function( child ){ unflatten( array, child ) } );                    
    }
    
    return tree;
}

tree = unflatten( arr );
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Gereksinimler

'İd' ve 'parentid' özelliklerinin sırasıyla kimliği ve üst kimliği gösterdiğini varsayar. 0 üst kimliğine sahip öğeler olmalıdır, aksi takdirde boş bir dizi geri alırsınız. Yetim unsurlar ve onların soyundan gelenler 'kayıptır'

http://jsfiddle.net/LkkwH/1/


4
else { parent['children'] = []; }Her düğümün bir özniteliğe sahip olduğundan emin olmak için ilk if-cümlesinden sonra ekleyebilirsiniz children(düğüm bir yaprak düğüm ise boş olacaktır)
Christopher

2
Kod pasajınız mükemmel çalıştı, teşekkürler !! Tek şey şudur: treeişlevi yinelemeli olarak çağırırken hiçbir zaman bir argüman olarak iletilmez, bu yüzden satırıntree = typeof tree !== 'undefined' ? tree : [];let tree = [];
Oscar Calderon

bu null, 0 yerine parent_ids'e izin verecek şekilde değiştirilebilir mi? Düzenleme: Nevermind, olarak değiştirerek id: 0çalıştırdım id: null.
dlinx90

Yukarıdaki cevabın iki döngü kullandığını ve dolayısıyla geliştirilebileceğini unutmayın. O (n) çözümünü uygulayan bir npm modülü bulamadığım için aşağıdakini oluşturdum (test edilen birim,% 100 kod kapsamı, sadece 0,5 kb boyutunda ve yazımları içeriyor). Belki birine yardımcı olur: npmjs.com/package/performant-array-to-tree
Philip Stanislaus

4
İlgilenen herkes için kod kolayca vanilya js'ye dönüştürülebilir: jsfiddle.net/LkkwH/853
xec

48

(BONUS1: DÜĞÜMLER SİPARİŞ EDİLEBİLİR veya ALINMAYABİLİR)

(BONUS2: 3. PARTİ KÜTÜPHANESİNE GEREK YOK, SADE JS)

(BONUS3: Kullanıcı "Elias Rabl" bunun en hızlı çözüm olduğunu söylüyor, aşağıdaki cevabına bakın)

İşte burada:

const createDataTree = dataset => {
    let hashTable = Object.create(null)
    dataset.forEach( aData => hashTable[aData.ID] = { ...aData, childNodes : [] } )
    let dataTree = []
    dataset.forEach( aData => {
      if( aData.parentID ) hashTable[aData.parentID].childNodes.push(hashTable[aData.ID])
      else dataTree.push(hashTable[aData.ID])
    } )
    return dataTree
}

İşte bir test, çözümün nasıl çalıştığını anlamanıza yardımcı olabilir:

it('creates a correct shape of dataTree', () => {

    let dataSet = [
        {
            "ID": 1,
            "Phone": "(403) 125-2552",
            "City": "Coevorden",
            "Name": "Grady"
        },
        {
            "ID": 2,
            "parentID": 1,
            "Phone": "(979) 486-1932",
            "City": "Chełm",
            "Name": "Scarlet"
        }
    ]

    let expectedDataTree = [ 
    {
            "ID": 1,
            "Phone": "(403) 125-2552",
            "City": "Coevorden",
            "Name": "Grady",
            childNodes : [
                {
                    "ID": 2,
                    "parentID": 1,
                    "Phone": "(979) 486-1932",
                    "City": "Chełm",
                    "Name": "Scarlet",
                    childNodes : []
                }
            ]
    } 
    ]

  expect( createDataTree(dataSet) ).toEqual(expectedDataTree)
});

2
childNodesSadece gerektiğinde ekleseydik daha doğru olmaz mıydı ? Bunları forEachbirinciden çıkarıp ikincinin içine taşıyarak mı?
arpl

@arpl kabul etti. Gerekirse kolayca değiştirilebilir. Veya varsayılan yol olması gerektiğini düşünüyorsanız, onu değiştirebilirim.
FurkanO

@FurkanO gerçekten güzel bir çözüm, ancak işlevsel programlama ile bu performansa yakın herhangi bir yere ulaşmak mümkün olabilir miydi (mutasyon yok)
Dac0d3r

34

Aynı sorunu yaşadım, ancak verilerin sıralanıp sıralanmadığından emin olamadım . 3. parti kitaplığı kullanamadığım için bu sadece vanilya Js; Giriş verileri @ Stephen'ın örneğinden alınabilir;

 var arr = [
        {'id':1 ,'parentid' : 0},
        {'id':4 ,'parentid' : 2},
        {'id':3 ,'parentid' : 1},
        {'id':5 ,'parentid' : 0},
        {'id':6 ,'parentid' : 0},
        {'id':2 ,'parentid' : 1},
        {'id':7 ,'parentid' : 4},
        {'id':8 ,'parentid' : 1}
      ];
    function unflatten(arr) {
      var tree = [],
          mappedArr = {},
          arrElem,
          mappedElem;

      // First map the nodes of the array to an object -> create a hash table.
      for(var i = 0, len = arr.length; i < len; i++) {
        arrElem = arr[i];
        mappedArr[arrElem.id] = arrElem;
        mappedArr[arrElem.id]['children'] = [];
      }


      for (var id in mappedArr) {
        if (mappedArr.hasOwnProperty(id)) {
          mappedElem = mappedArr[id];
          // If the element is not at the root level, add it to its parent array of children.
          if (mappedElem.parentid) {
            mappedArr[mappedElem['parentid']]['children'].push(mappedElem);
          }
          // If the element is at the root level, add it to first level elements array.
          else {
            tree.push(mappedElem);
          }
        }
      }
      return tree;
    }

var tree = unflatten(arr);
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))

JS Fiddle

Ağaca Düz Dizi


bazı durumlarda mappedArr[mappedElem['parentid']]['children'], childrentanımsızlara erişilemediği için başarısız oluyordu.
Al-Mothafar

ebeveyn kimliği: 1'den nasıl başlayabilirim?
vinni

31

Bu ES6 yaklaşımını kullanın. Cazibe gibi çalışır

// Data Set
// One top level comment 
const comments = [{
    id: 1,
    parent_id: null
}, {
    id: 2,
    parent_id: 1
}, {
    id: 3,
    parent_id: 1
}, {
    id: 4,
    parent_id: 2
}, {
    id: 5,
    parent_id: 4
}];

const nest = (items, id = null, link = 'parent_id') =>
  items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: nest(items, item.id) }));

console.log(
  nest(comments)
)


3
Bence en kısa ve en iyi cevap
java-man-script

2
FurkanO'nun cevabıyla kıyaslandığında sloooow
Geza Turi

16

daha basit bir fonksiyon list-to-tree-lite

npm install list-to-tree-lite

listToTree(list)

kaynak:

function listToTree(data, options) {
    options = options || {};
    var ID_KEY = options.idKey || 'id';
    var PARENT_KEY = options.parentKey || 'parent';
    var CHILDREN_KEY = options.childrenKey || 'children';

    var tree = [],
        childrenOf = {};
    var item, id, parentId;

    for (var i = 0, length = data.length; i < length; i++) {
        item = data[i];
        id = item[ID_KEY];
        parentId = item[PARENT_KEY] || 0;
        // every item may have children
        childrenOf[id] = childrenOf[id] || [];
        // init its children
        item[CHILDREN_KEY] = childrenOf[id];
        if (parentId != 0) {
            // init its parent's children object
            childrenOf[parentId] = childrenOf[parentId] || [];
            // push it into its parent's children object
            childrenOf[parentId].push(item);
        } else {
            tree.push(item);
        }
    };

    return tree;
}

jsfiddle


10

Bu soruyu sadece iki satır kodlamayla halledebilirsiniz:

_(flatArray).forEach(f=>
           {f.nodes=_(flatArray).filter(g=>g.parentId==f.id).value();});

var resultArray=_(flatArray).filter(f=>f.parentId==null).value();

Çevrimiçi Test Et (oluşturulan ağaç için tarayıcı konsoluna bakın)

Gereksinimler:

1- lodash 4'ü kurun (objeleri ve koleksiyonları performant metotlarla işlemek için bir Javascript kütüphanesi => c # 'deki Linq gibi) Lodash

2- Aşağıdaki gibi bir flatArray:

    var flatArray=
    [{
      id:1,parentId:null,text:"parent1",nodes:[]
    }
   ,{
      id:2,parentId:null,text:"parent2",nodes:[]
    }
    ,
    {
      id:3,parentId:1,text:"childId3Parent1",nodes:[]
    }
    ,
    {
      id:4,parentId:1,text:"childId4Parent1",nodes:[]
    }
    ,
    {
      id:5,parentId:2,text:"childId5Parent2",nodes:[]
    }
    ,
    {
      id:6,parentId:2,text:"childId6Parent2",nodes:[]
    }
    ,
    {
      id:7,parentId:3,text:"childId7Parent3",nodes:[]
    }
    ,
    {
      id:8,parentId:5,text:"childId8Parent5",nodes:[]
    }];

Teşekkürler Bay Bakhshabadi

İyi şanslar


8

Listeden ağaçlara paket kurulumu yararlı olabilir :

bower install list-to-tree --save

veya

npm install list-to-tree --save

Örneğin, bir listeye sahip olun:

var list = [
  {
    id: 1,
    parent: 0
  }, {
    id: 2,
    parent: 1
  }, {
    id: 3,
    parent: 1
  }, {
    id: 4,
    parent: 2
  }, {
    id: 5,
    parent: 2
  }, {
    id: 6,
    parent: 0
  }, {
    id: 7,
    parent: 0
  }, {
    id: 8,
    parent: 7
  }, {
    id: 9,
    parent: 8
  }, {
    id: 10,
    parent: 0
  }
];

Ağaç listesinden ağaç paketini kullan:

var ltt = new LTT(list, {
  key_id: 'id',
  key_parent: 'parent'
});
var tree = ltt.GetTree();

Sonuç:

[{
  "id": 1,
  "parent": 0,
  "child": [
    {
      "id": 2,
      "parent": 1,
      "child": [
        {
          "id": 4,
          "parent": 2
        }, {
          "id": 5, "parent": 2
        }
      ]
    },
    {
      "id": 3,
      "parent": 1
    }
  ]
}, {
  "id": 6,
  "parent": 0
}, {
  "id": 7,
  "parent": 0,
  "child": [
    {
      "id": 8,
      "parent": 7,
      "child": [
        {
          "id": 9,
          "parent": 8
        }
      ]
    }
  ]
}, {
  "id": 10,
  "parent": 0
}];

1
Not o bağlantı sadece cevaplar tavsiye edilmez, SO cevaplar çözüm (vs. henüz zamanla bayat almak eğilimindedir referanslar, başka mola) için bir aramanın son nokta olmalıdır. Lütfen bağlantıyı referans olarak koruyarak buraya bağımsız bir özet eklemeyi düşünün
kleopatra

-1'in nedenini anlamıyorum, bunun iyi bir çözüm olduğunu düşünüyorum ama maalesef paketi
gitHub'da

Pakete gösterdiğiniz ilgi için teşekkür ederiz. Daha sonra genişletmeyi planlıyorum. İşte depoya bir bağlantı github.com/DenQ/list-to-tree
DenQ

@oriaj Projenin fayda sağladığına sevindim. Birkaç fikrin planları
DenQ

Güzel çalışıyor, teşekkürler @DenQ. Yine de daha fazla test kapsamı olmasını isterdim!
IliasT

3

Kullanıcılar tarafından önerilen, en genel iki çözümün performansını değerlendirmek için bir test komut dosyası yazdım (yani girdinin önceden sıralanması gerekmediği ve kodun üçüncü taraf kitaplıklarına bağlı olmadığı) shekhardtu ( cevaba bakın ) ve FurkanO ( cevaba bakınız ).

http://playcode.io/316025?tabs=console&script.js&output

FurkanO'nun çözümü en hızlı gibi görünüyor.

/*
** performance test for /programming/18017869/build-tree-array-from-flat-array-in-javascript
*/

// Data Set (e.g. nested comments)
var comments = [{
    id: 1,
    parent_id: null
}, {
    id: 2,
    parent_id: 1
}, {
    id: 3,
    parent_id: 4
}, {
    id: 4,
    parent_id: null
}, {
    id: 5,
    parent_id: 4
}];

// add some random entries
let maxParentId = 10000;
for (let i=6; i<=maxParentId; i++)
{
  let randVal = Math.floor((Math.random() * maxParentId) + 1);
  comments.push({
    id: i,
    parent_id: (randVal % 200 === 0 ? null : randVal)
  });
}

// solution from user "shekhardtu" (https://stackoverflow.com/a/55241491/5135171)
const nest = (items, id = null, link = 'parent_id') =>
  items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: nest(items, item.id) }));
;

// solution from user "FurkanO" (https://stackoverflow.com/a/40732240/5135171)
const createDataTree = dataset => {
    let hashTable = Object.create(null)
    dataset.forEach( aData => hashTable[aData.id] = { ...aData, children : [] } )
    let dataTree = []
    dataset.forEach( aData => {
      if( aData.parent_id ) hashTable[aData.parent_id].children.push(hashTable[aData.id])
      else dataTree.push(hashTable[aData.id])
    } )
    return dataTree
};


/*
** lets evaluate the timing for both methods
*/
let t0 = performance.now();
let createDataTreeResult = createDataTree(comments);
let t1 = performance.now();
console.log("Call to createDataTree took " + Math.floor(t1 - t0) + " milliseconds.");

t0 = performance.now();
let nestResult = nest(comments);
t1 = performance.now();
console.log("Call to nest took " + Math.floor(t1 - t0) + " milliseconds.");




//console.log(nestResult);
//console.log(createDataTreeResult);

// bad, but simple way of comparing object equality
console.log(JSON.stringify(nestResult)===JSON.stringify(createDataTreeResult));


2

Bu, sıralanmamış öğeler için bir tekliftir. Bu işlev, tek bir döngü ve bir karma tablo ile çalışır ve tüm öğeleri id. Bir kök düğüm bulunursa, nesne sonuç dizisine eklenir.

function getTree(data, root) {
    var o = {};
    data.forEach(function (a) {
        if (o[a.id] && o[a.id].children) {
            a.children = 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;
}

var data = { People: [{ id: "12", parentId: "0", text: "Man", level: "1", children: null }, { id: "6", parentId: "12", text: "Boy", level: "2", children: null }, { id: "7", parentId: "12", text: "Other", level: "2", children: null }, { id: "9", parentId: "0", text: "Woman", level: "1", children: null }, { id: "11", parentId: "9", text: "Girl", level: "2", children: null }], Animals: [{ id: "5", parentId: "0", text: "Dog", level: "1", children: null }, { id: "8", parentId: "5", text: "Puppy", level: "2", children: null }, { id: "10", parentId: "13", text: "Cat", level: "1", children: null }, { id: "14", parentId: "13", text: "Kitten", level: "2", children: null }] },
    tree = Object.keys(data).reduce(function (r, k) {
        r[k] = getTree(data[k], '0');
        return r;
    }, {});

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


1

lodashjs ile de yap (v4.x)

function buildTree(arr){
  var a=_.keyBy(arr, 'id')
  return _
   .chain(arr)
   .groupBy('parentId')
   .forEach(function(v,k){ 
     k!='0' && (a[k].children=(a[k].children||[]).concat(v));
   })
   .result('0')
   .value();
}

1

@ WilliamLeung'un saf JavaScript çözümünü seviyorum, ancak bazen nesneye bir referans tutmak için mevcut dizide değişiklikler yapmanız gerekir.

function listToTree(data, options) {
  options = options || {};
  var ID_KEY = options.idKey || 'id';
  var PARENT_KEY = options.parentKey || 'parent';
  var CHILDREN_KEY = options.childrenKey || 'children';

  var item, id, parentId;
  var map = {};
    for(var i = 0; i < data.length; i++ ) { // make cache
    if(data[i][ID_KEY]){
      map[data[i][ID_KEY]] = data[i];
      data[i][CHILDREN_KEY] = [];
    }
  }
  for (var i = 0; i < data.length; i++) {
    if(data[i][PARENT_KEY]) { // is a child
      if(map[data[i][PARENT_KEY]]) // for dirty data
      {
        map[data[i][PARENT_KEY]][CHILDREN_KEY].push(data[i]); // add child to parent
        data.splice( i, 1 ); // remove from root
        i--; // iterator correction
      } else {
        data[i][PARENT_KEY] = 0; // clean dirty data
      }
    }
  };
  return data;
}

Örnek: https://jsfiddle.net/kqw1qsf0/17/


1

var data = [{"country":"india","gender":"male","type":"lower","class":"X"},
			{"country":"china","gender":"female","type":"upper"},
			{"country":"india","gender":"female","type":"lower"},
			{"country":"india","gender":"female","type":"upper"}];
var seq = ["country","type","gender","class"];
var treeData = createHieArr(data,seq);
console.log(treeData)
function createHieArr(data,seq){
	var hieObj = createHieobj(data,seq,0),
		hieArr = convertToHieArr(hieObj,"Top Level");
		return [{"name": "Top Level", "parent": "null",
				     "children" : hieArr}]
	function convertToHieArr(eachObj,parent){
		var arr = [];
		for(var i in eachObj){
			arr.push({"name":i,"parent":parent,"children":convertToHieArr(eachObj[i],i)})
		}
		return arr;
	}
	function createHieobj(data,seq,ind){
		var s = seq[ind];
		if(s == undefined){
			return [];
		}
		var childObj = {};
		for(var ele of data){
			if(ele[s] != undefined){
				if(childObj[ele[s]] == undefined){
					childObj[ele[s]] = [];
				}
				childObj[ele[s]].push(ele);
			}
		}
		ind = ind+1;
		for(var ch in childObj){
			childObj[ch] = createHieobj(childObj[ch],seq,ind)
		}
		return childObj;
	}
}


Bu işlevi, nesneler dizisindeki verileri, d3 ağaç etkileşimli grafiği için gerekli olan ağaç yapısına dönüştürmek için oluşturdum. Sadece 40 satır kod ile çıktıyı alabildim. Bu işlevi js'de özyinelemeli işlevselliği kullanarak verimli bir şekilde yazdım. Geri bildiriminizi bana bildirin ve deneyin. Teşekkür ederim!!!!
karthik reddy

Anwser için teşekkürler..D3 ağaç topolojim için mükemmel çalışıyor .. Şimdi düğüm rengini düğümün değerlerine göre değiştirmem gerekiyor .. Bu yüzden JSON'da bir bayrak değeri geçirmem gerekiyor. . Bunu nasıl yaparım .. {"ad": "Üst Seviye", "bayrak": 1, "ebeveyn": "boş", "çocuklar": [{"ad": "hindistan", "bayrak": 0 , "parent": "Üst Seviye", "çocuklar": [
Puneeth Kumar

1

Klasör ağacını düz diziden görüntülemek zorunda kaldığımda birkaç gün önce benzer bir sorun yaşadım. Burada TypeScript'te herhangi bir çözüm görmedim, bu yüzden yardımcı olacağını umuyorum.

Benim durumumda ana ebeveyn yalnızca bir idi, ayrıca rawData dizisinin sıralanması gerekmiyor. Çözümler, geçici nesneyi hazırlamaya dayalıdır. {parentId: [child1, child2, ...] }

örnek ham veri

const flatData: any[] = Folder.ofCollection([
  {id: '1', title: 'some title' },
  {id: '2', title: 'some title', parentId: 1 },
  {id: '3', title: 'some title', parentId: 7 },
  {id: '4', title: 'some title', parentId: 1 },
  {id: '5', title: 'some title', parentId: 2 },
  {id: '6', title: 'some title', parentId: 5 },
  {id: '7', title: 'some title', parentId: 5 },

]);

def Klasör

export default class Folder {
    public static of(data: any): Folder {
        return new Folder(data);
    }

    public static ofCollection(objects: any[] = []): Folder[] {
        return objects.map((obj) => new Folder(obj));
    }

    public id: string;
    public parentId: string | null;
    public title: string;
    public children: Folder[];

    constructor(data: any = {}) {
        this.id = data.id;
        this.parentId = data.parentId || null;
        this.title = data.title;
        this.children = data.children || [];
    }
}

ÇÖZÜM : Düz argüman için ağaç yapısını döndüren fonksiyon

    public getTree(flatData: any[]): Folder[] {
        const addChildren = (item: Folder) => {
            item.children = tempChild[item.id] || [];
            if (item.children.length) {
                item.children.forEach((child: Folder) => {
                    addChildren(child);
                });
            }
        };

        const tempChild: any = {};
        flatData.forEach((item: Folder) => {
            const parentId = item.parentId || 0;
            Array.isArray(tempChild[parentId]) ? tempChild[parentId].push(item) : (tempChild[parentId] = [item]);
        });

        const tree: Folder[] = tempChild[0];
        tree.forEach((base: Folder) => {
            addChildren(base);
        });
        return tree;
    }

0

İşte yukarıdaki cevaplardan sonra modellenmiş, bir Babel ortamına uyarlanmış basit bir yardımcı işlev:

import { isEmpty } from 'lodash'

export default function unflattenEntities(entities, parent = {id: null}, tree = []) {

  let children = entities.filter( entity => entity.parent_id == parent.id)

  if (!isEmpty( children )) {
    if ( parent.id == null ) {
      tree = children
    } else {
      parent['children'] = children
    }
    children.map( child => unflattenEntities( entities, child ) )
  }

  return tree

}

0

Burada Steven Harris'in düz ES5 olan ve hem en üst düzeyde hem de çocuklar için bir düğüm dizisi döndürmek yerine id'de anahtarlanmış bir nesne döndüren değiştirilmiş bir sürümü var.

unflattenToObject = function(array, parent) {
  var tree = {};
  parent = typeof parent !== 'undefined' ? parent : {id: 0};

  var childrenArray = array.filter(function(child) {
    return child.parentid == parent.id;
  });

  if (childrenArray.length > 0) {
    var childrenObject = {};
    // Transform children into a hash/object keyed on token
    childrenArray.forEach(function(child) {
      childrenObject[child.id] = child;
    });
    if (parent.id == 0) {
      tree = childrenObject;
    } else {
      parent['children'] = childrenObject;
    }
    childrenArray.forEach(function(child) {
      unflattenToObject(array, child);
    })
  }

  return tree;
};

var arr = [
    {'id':1 ,'parentid': 0},
    {'id':2 ,'parentid': 1},
    {'id':3 ,'parentid': 1},
    {'id':4 ,'parentid': 2},
    {'id':5 ,'parentid': 0},
    {'id':6 ,'parentid': 0},
    {'id':7 ,'parentid': 4}
];
tree = unflattenToObject(arr);

0

Bu, birden çok kök öğe ile çalışan yukarıdakinin değiştirilmiş bir sürümüdür, kimliklerim ve ebeveyn kimliklerim için GUID'ler kullanıyorum, böylece onları oluşturan kullanıcı arayüzünde kök öğeleri 0000000-00000-00000-TREE-ROOT-ITEM gibi bir şeye kodluyorum

var ağaç = düzleştirilmemiş (kayıtlar, "TREE-ROOT-ITEM");

function unflatten(records, rootCategoryId, parent, tree){
    if(!_.isArray(tree)){
        tree = [];
        _.each(records, function(rec){
            if(rec.parentId.indexOf(rootCategoryId)>=0){        // change this line to compare a root id
            //if(rec.parentId == 0 || rec.parentId == null){    // example for 0 or null
                var tmp = angular.copy(rec);
                tmp.children = _.filter(records, function(r){
                    return r.parentId == tmp.id;
                });
                tree.push(tmp);
                //console.log(tree);
                _.each(tmp.children, function(child){
                    return unflatten(records, rootCategoryId, child, tree);
                });
            }
        });
    }
    else{
        if(parent){
            parent.children = _.filter(records, function(r){
                return r.parentId == parent.id;
            });
            _.each(parent.children, function(child){
                return unflatten(records, rootCategoryId, child, tree);
            });
        }
    }
    return tree;
}

0

İnternetten kopyalandı http://jsfiddle.net/stywell/k9x2a3g6/

    function list2tree(data, opt) {
        opt = opt || {};
        var KEY_ID = opt.key_id || 'ID';
        var KEY_PARENT = opt.key_parent || 'FatherID';
        var KEY_CHILD = opt.key_child || 'children';
        var EMPTY_CHILDREN = opt.empty_children;
        var ROOT_ID = opt.root_id || 0;
        var MAP = opt.map || {};
        function getNode(id) {
            var node = []
            for (var i = 0; i < data.length; i++) {
                if (data[i][KEY_PARENT] == id) {
                    for (var k in MAP) {
                        data[i][k] = data[i][MAP[k]];
                    }
                    if (getNode(data[i][KEY_ID]) !== undefined) {
                        data[i][KEY_CHILD] = getNode(data[i][KEY_ID]);
                    } else {
                        if (EMPTY_CHILDREN === null) {
                            data[i][KEY_CHILD] = null;
                        } else if (JSON.stringify(EMPTY_CHILDREN) === '[]') {
                            data[i][KEY_CHILD] = [];
                        }
                    }
                    node.push(data[i]);
                }
            }
            if (node.length == 0) {
                return;
            } else {
                return node;
            }
        }
        return getNode(ROOT_ID)
    }

    var opt = {
        "key_id": "ID",              //节点的ID
        "key_parent": "FatherID",    //节点的父级ID
        "key_child": "children",     //子节点的名称
        "empty_children": [],        //子节点为空时,填充的值  //这个参数为空时,没有子元素的元素不带key_child属性;还可以为null或者[],同理
        "root_id": 0,                //根节点的父级ID
        "map": {                     //在节点内映射一些值  //对象的键是节点的新属性; 对象的值是节点的老属性,会赋值给新属性
            "value": "ID",
            "label": "TypeName",
        }
    };

0

Npm paketini ağaçtan diziye kullanabilirsiniz https://github.com/alferov/array-to-tree . Düz bir düğüm dizisini (işaretçilerle ana düğümlere) iç içe geçmiş bir veri yapısına dönüştürür.

Veri tabanı veri setlerinden alınanların iç içe geçmiş bir veri yapısına (yani gezinti ağacı) dönüştürülmesiyle ilgili bir sorunu çözer.

Kullanımı:

var arrayToTree = require('array-to-tree');

var dataOne = [
  {
    id: 1,
    name: 'Portfolio',
    parent_id: undefined
  },
  {
    id: 2,
    name: 'Web Development',
    parent_id: 1
  },
  {
    id: 3,
    name: 'Recent Works',
    parent_id: 2
  },
  {
    id: 4,
    name: 'About Me',
    parent_id: undefined
  }
];

arrayToTree(dataOne);

/*
 * Output:
 *
 * Portfolio
 *   Web Development
 *     Recent Works
 * About Me
 */

0

bir react projesinde kullandığım şey bu

// ListToTree.js
import _filter from 'lodash/filter';
import _map from 'lodash/map';

export default (arr, parentIdKey) => _map(_filter(arr, ar => !ar[parentIdKey]), ar => ({
  ...ar,
  children: _filter(arr, { [parentIdKey]: ar.id }),
}));

kullanımı:

// somewhere.js
import ListToTree from '../Transforms/ListToTree';

const arr = [
   {
      "id":"Bci6XhCLZKPXZMUztm1R",
      "name":"Sith"
   },
   {
      "id":"C3D71CMmASiR6FfDPlEy",
      "name":"Luke",
      "parentCategoryId":"ltatOlEkHdVPf49ACCMc"
   },
   {
      "id":"aS8Ag1BQqxkO6iWBFnsf",
      "name":"Obi Wan",
      "parentCategoryId":"ltatOlEkHdVPf49ACCMc"
   },
   {
      "id":"ltatOlEkHdVPf49ACCMc",
      "name":"Jedi"
   },
   {
      "id":"pw3CNdNhnbuxhPar6nOP",
      "name":"Palpatine",
      "parentCategoryId":"Bci6XhCLZKPXZMUztm1R"
   }
];
const response = ListToTree(arr, 'parentCategoryId');

çıktı:

[
   {
      "id":"Bci6XhCLZKPXZMUztm1R",
      "name":"Sith",
      "children":[
         {
            "id":"pw3CNdNhnbuxhPar6nOP",
            "name":"Palpatine",
            "parentCategoryId":"Bci6XhCLZKPXZMUztm1R"
         }
      ]
   },
   {
      "id":"ltatOlEkHdVPf49ACCMc",
      "name":"Jedi",
      "children":[
         {
            "id":"C3D71CMmASiR6FfDPlEy",
            "name":"Luke",
            "parentCategoryId":"ltatOlEkHdVPf49ACCMc"
         },
         {
            "id":"aS8Ag1BQqxkO6iWBFnsf",
            "name":"Obi Wan",
            "parentCategoryId":"ltatOlEkHdVPf49ACCMc"
         }
      ]
   }
]```


0

Daktilo çözümüm, belki size yardımcı olur:

type ITreeItem<T> = T & {
    children: ITreeItem<T>[],
};

type IItemKey = string | number;

function createTree<T>(
    flatList: T[],
    idKey: IItemKey,
    parentKey: IItemKey,
): ITreeItem<T>[] {
    const tree: ITreeItem<T>[] = [];

    // hash table.
    const mappedArr = {};
    flatList.forEach(el => {
        const elId: IItemKey = el[idKey];

        mappedArr[elId] = el;
        mappedArr[elId].children = [];
    });

    // also you can use Object.values(mappedArr).forEach(...
    // but if you have element which was nested more than one time
    // you should iterate flatList again:
    flatList.forEach((elem: ITreeItem<T>) => {
        const mappedElem = mappedArr[elem[idKey]];

        if (elem[parentKey]) {
            mappedArr[elem[parentKey]].children.push(elem);
        } else {
            tree.push(mappedElem);
        }
    });

    return tree;
}

Kullanım örneği:

createTree(yourListData, 'id', 'parentId');

0

@Halcyon cevabına dayalı bir ES6 sürümü yazdım

const array = [
  {
    id: '12',
    parentId: '0',
    text: 'one-1'
  },
  {
    id: '6',
    parentId: '12',
    text: 'one-1-6'
  },
  {
    id: '7',
    parentId: '12',
    text: 'one-1-7'
  },

  {
    id: '9',
    parentId: '0',
    text: 'one-2'
  },
  {
    id: '11',
    parentId: '9',
    text: 'one-2-11'
  }
];

// Prevent changes to the original data
const arrayCopy = array.map(item => ({ ...item }));

const listToTree = list => {
  const map = {};
  const roots = [];

  list.forEach((v, i) => {
    map[v.id] = i;
    list[i].children = [];
  });

  list.forEach(v => (v.parentId !== '0' ? list[map[v.parentId]].children.push(v) : roots.push(v)));

  return roots;
};

console.log(listToTree(arrayCopy));

Bu algoritmanın prensibi, bir indeks ilişkisi kurmak için "eşleme" kullanmaktır. Listede "öğe" yi "parentId" ile bulmak ve her "öğeye" "alt öğe" eklemek kolaydır, çünkü "liste" bir referans ilişkisidir, bu nedenle "kökler" tüm ağaçla ilişkiler kurar.


0

Benzer bir soruya cevap verin:

https://stackoverflow.com/a/61575152/7388356

GÜNCELLEME

MapES6'da tanıtılan nesneyi kullanabilirsiniz . Temel olarak, diziyi tekrar yineleyerek üst öğe bulmak yerine, dizideki öğeleri dizine göre alırsınız gibi, diziden üst öğeyi üst öğenin kimliğine göre alırsınız.

İşte basit örnek:

const people = [
  {
    id: "12",
    parentId: "0",
    text: "Man",
    level: "1",
    children: null
  },
  {
    id: "6",
    parentId: "12",
    text: "Boy",
    level: "2",
    children: null
  },
  {
    id: "7",
    parentId: "12",
    text: "Other",
    level: "2",
    children: null
  },
  {
    id: "9",
    parentId: "0",
    text: "Woman",
    level: "1",
    children: null
  },
  {
    id: "11",
    parentId: "9",
    text: "Girl",
    level: "2",
    children: null
  }
];

function toTree(arr) {
  let arrMap = new Map(arr.map(item => [item.id, item]));
  let tree = [];

  for (let i = 0; i < arr.length; i++) {
    let item = arr[i];

    if (item.parentId !== "0") {
      let parentItem = arrMap.get(item.parentId);

      if (parentItem) {
        let { children } = parentItem;

        if (children) {
          parentItem.children.push(item);
        } else {
          parentItem.children = [item];
        }
      }
    } else {
      tree.push(item);
    }
  }

  return tree;
}

let tree = toTree(people);

console.log(tree);

Crazy-Williams-glgj3'ü düzenle


1
Bu bağlantı soruyu yanıtlasa da, cevabın temel kısımlarını buraya eklemek ve referans için bağlantıyı sağlamak daha iyidir. Bağlantılı sayfa değişirse yalnızca bağlantı yanıtları geçersiz hale gelebilir. - Yorumdan
JeffRSon

Tamam, ana fikir
ekledim

0

@ FurkanO'nun cevabına dayanarak , orijinal verileri değiştirmeyen başka bir sürüm oluşturdum (@ Dac0d3r gibi). @ Shekhardtu'nun cevabını gerçekten beğendim , ancak verileri birçok kez filtrelemesi gerektiğini fark ettim. Önce verileri kopyalayarak FurkanO'nun cevabını kullanmak için bir çözüm olabileceğini düşündüm. Benim versiyonumu jsperf ile denedim ve sonuçları maalesef (çok) kasvetli ... Kabul edilen cevap gerçekten iyi bir cevap gibi görünüyor! Benim sürümüm oldukça yapılandırılabilir ve güvenli değil, bu yüzden yine de sizinle paylaşıyorum; İşte benim katkım:

function unflat(data, options = {}) {
    const { id, parentId, childrenKey } = {
        id: "id",
        parentId: "parentId",
        childrenKey: "children",
        ...options
    };
    const copiesById = data.reduce(
        (copies, datum) => ((copies[datum[id]] = datum) && copies),
        {}
    );
    return Object.values(copiesById).reduce(
        (root, datum) => {
            if ( datum[parentId] && copiesById[datum[parentId]] ) {
                copiesById[datum[parentId]][childrenKey] = [ ...copiesById[datum[parentId]][childrenKey], datum ];
            } else {
                root = [ ...root, datum ];
            }
            return root
        }, []
    );
}

const data = [
    {
        "account": "10",
        "name": "Konto 10",
        "parentAccount": null
    },{
        "account": "1010",
        "name": "Konto 1010",
        "parentAccount": "10"
    },{
        "account": "10101",
        "name": "Konto 10101",
        "parentAccount": "1010"
    },{
        "account": "10102",
        "name": "Konto 10102",
        "parentAccount": "1010"
    },{
        "account": "10103",
        "name": "Konto 10103",
        "parentAccount": "1010"
    },{
        "account": "20",
        "name": "Konto 20",
        "parentAccount": null
    },{
        "account": "2020",
        "name": "Konto 2020",
        "parentAccount": "20"
    },{
        "account": "20201",
        "name": "Konto 20201",
        "parentAccount": "2020"
    },{
        "account": "20202",
        "name": "Konto 20202",
        "parentAccount": "2020"
    }
];

const options = {
    id: "account",
    parentId: "parentAccount",
    childrenKey: "children"
};

console.log(
    "Hierarchical tree",
    unflat(data, options)
);

Options parametresiyle, hangi özelliğin id veya üst kimlik olarak kullanılacağını yapılandırmak mümkündür. Birisi isterse, çocuk özelliğinin adını yapılandırmak da mümkündür."childNodes": [] .

OP, varsayılan seçenekleri kullanabilir:

input.People = unflat(input.People);

Ebeveyn kimliği falsy (ise null, undefinedya da diğer falsy değerler) veya ana nesne mevcut değil, bir kök düğüm olarak nesneyi düşünün.


-1
  1. üçüncü taraf kitaplığı olmadan
  2. ön sipariş dizisine gerek yok
  3. ağacın istediğin herhangi bir kısmını alabilirsin

Bunu dene

function getUnflatten(arr,parentid){
  let output = []
  for(const obj of arr){
    if(obj.parentid == parentid)

      let children = getUnflatten(arr,obj.id)

      if(children.length){
        obj.children = children
      }
      output.push(obj)
    }
  }

  return output
 }

Jsfiddle'da test edin


-1

Düğüm Dizisini Ağaca Dönüştür

Bir düğüm dizisini ( üst kimlik ile ilişkili ) bir Ağaç yapısına dönüştürmek için ES6 işlevi :

/**
 * Convert nodes list related by parent ID - to tree.
 * @syntax getTree(nodesArray [, rootID [, propertyName]])
 *
 * @param {Array} arr   Array of nodes
 * @param {integer} id  Defaults to 0
 * @param {string} p    Property name. Defaults to "parent_id"
 * @returns {Object}    Nodes tree
 */

const getTree = (arr, p = "parent_id") => arr.reduce((o, n) => {

  if (!o[n.id]) o[n.id] = {};
  if (!o[n[p]]) o[n[p]] = {};
  if (!o[n[p]].nodes) o[n[p]].nodes= [];
  if (o[n.id].nodes) n.nodes= o[n.id].nodes;

  o[n[p]].nodes.push(n);
  o[n.id] = n;

  return o;
}, {});

Düğüm Ağacından HTML Listesi Oluştur

Ağacımızı yerleştirdikten sonra UL> LI Öğelerini oluşturmak için özyinelemeli bir işlev :

/**
 * Convert Tree structure to UL>LI and append to Element
 * @syntax getTree(treeArray [, TargetElement [, onLICreatedCallback ]])
 *
 * @param {Array} tree Tree array of nodes
 * @param {Element} el HTMLElement to insert into
 * @param {function} cb Callback function called on every LI creation
 */

const treeToHTML = (tree, el, cb) => el.append(tree.reduce((ul, n) => {
  const li = document.createElement('li');

  if (cb) cb.call(li, n);
  if (n.nodes?.length) treeToHTML(n.nodes, li, cb);

  ul.append(li);
  return ul;
}, document.createElement('ul')));

Demo süresi

Aşağıda, doğrusal bir düğüm dizisine sahip olan ve yukarıdaki her iki işlevi kullanan bir örnek verilmiştir:

const getTree = (arr, p = "parent_id") => arr.reduce((o, n) => {
  if (!o[n.id]) o[n.id] = {};
  if (!o[n[p]]) o[n[p]] = {};
  if (!o[n[p]].nodes) o[n[p]].nodes = [];
  if (o[n.id].nodes) n.nodes = o[n.id].nodes;
  o[n[p]].nodes.push(n);
  o[n.id] = n;
  return o;
}, {});


const treeToHTML = (tree, el, cb) => el.append(tree.reduce((ul, n) => {
  const li = document.createElement('li');
  if (cb) cb.call(li, n);
  if (n.nodes?.length) treeToHTML(n.nodes, li, cb);
  ul.append(li);
  return ul;
}, document.createElement('ul')));


// DEMO TIME:

const nodesList = [
  {id: 10,  parent_id: 4,  text: "Item 10"}, // PS: Order does not matters
  {id: 1,   parent_id: 0,  text: "Item 1"},  
  {id: 4,   parent_id: 0,  text: "Item 4"},
  {id: 3,   parent_id: 5,  text: "Item 3"},
  {id: 5,   parent_id: 4,  text: "Item 5"},
  {id: 2,   parent_id: 1,  text: "Item 2"},
];
const myTree = getTree(nodesList)[0].nodes; // Get nodes of Root (0)

treeToHTML(myTree, document.querySelector("#tree"), function(node) {
  this.textContent = `(${node.parent_id} ${node.id}) ${node.text}`;
  this._node = node;
  this.addEventListener('click', clickHandler);
});

function clickHandler(ev) {
  if (ev.target !== this) return;
  console.clear();
  console.log(this._node.id);
};
<div id="tree"></div>


-1

Bu eski bir iş parçacığı ama bir güncellemenin asla zarar vermediğini düşündüm, ES6 ile şunları yapabilirsiniz:

const data = [{
    id: 1,
    parent_id: 0
}, {
    id: 2,
    parent_id: 1
}, {
    id: 3,
    parent_id: 1
}, {
    id: 4,
    parent_id: 2
}, {
    id: 5,
    parent_id: 4
}, {
    id: 8,
    parent_id: 7
}, {
    id: 9,
    parent_id: 8
}, {
    id: 10,
    parent_id: 9
}];

const arrayToTree = (items=[], id = null, link = 'parent_id') => items.filter(item => id==null ? !items.some(ele=>ele.id===item[link]) : item[link] === id ).map(item => ({ ...item, children: arrayToTree(items, item.id) }))
const temp1=arrayToTree(data)
console.log(temp1)

const treeToArray = (items=[], key = 'children') => items.reduce((acc, curr) => [...acc, ...treeToArray(curr[key])].map(({ [`${key}`]: child, ...ele }) => ele), items);
const temp2=treeToArray(temp1)

console.log(temp2)

umarım birine yardımcı olur

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.