javascriptarraystree

transform tree from db format to json format in javascript


I'm trying to transform my data on client side from this format:

let testLoad=  [{"id":7,"name":"Kuwait","parentId":2},
                    {"id":4,"name":"Iraq","parentId":2},
                    {"id":10,"name":"Qatar","parentId":2},
                    {"id":2,"name":"Middle East","parentId":1},
                    {"id":3,"name":"Bahrain","parentId":2},
                    {"id":6,"name":"Jordan","parentId":2},
                    {"id":8,"name":"Lebanon","parentId":2},
                    {"id":1,"name":"Africa/Middle East","parentId":null},
                    {"id":5,"name":"Israel","parentId":2},
                    {"id":9,"name":"Oman","parentId":2}];

to this format:

   let testLoad=  [{"id":55,"text":"Africa/Middle East","children":[
      {"id":2,"text":"Middle East","children":   [{"id":7,"name":"Kuwait","children":[]},
{"id":4,"name":"Iraq","children":[]},
{"id":10,"name":"Qatar","children":[]},
{"id":3,"name":"Bahrain","children":[]},
{"id":6,"name":"Jordan","children":[]},
{"id":8,"name":"Lebanon","children":[]},
{"id":5,"name":"Israel","children":[]},
{"id":9,"name":"Oman","children":[]}]}]

so I can use it in a tree library like gijgo tree or jstree in javascript.


Solution

  • You could use recursion :

    var testLoad=  [{"id":7,"name":"Kuwait","parentId":2},
                        {"id":4,"name":"Iraq","parentId":2},
                        {"id":10,"name":"Qatar","parentId":2},
                        {"id":2,"name":"Middle East","parentId":1},
                        {"id":3,"name":"Bahrain","parentId":2},
                        {"id":6,"name":"Jordan","parentId":2},
                        {"id":8,"name":"Lebanon","parentId":2},
                        {"id":1,"name":"Africa/Middle East","parentId":null},
                        {"id":5,"name":"Israel","parentId":2},
                        {"id":9,"name":"Oman","parentId":2}];
    
    function lookingForNodeWithParent( nodes, parentId ) {
    
      var arrayToReturn = [];
    
      for( var i = 0, length = nodes.length; i < length; i++ ) {
        if( nodes[i].parentId === parentId ) {
            var node = nodes[i];
          
          arrayToReturn.push({
            id: node.id,
            name: node.name,
            children: lookingForNodeWithParent( nodes, node.id )
          });
        }
      }
      
      return arrayToReturn;
    }
    
    var array = lookingForNodeWithParent( testLoad, null );
    console.log( array )