Hierarchical array to set for use with jsTree

Question

I'm trying to create function that convert hierarchical data stored in array with following format: id, name, idType, members, idParent to text, children.

The data of array:

[
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"}
]

What I need to do is create two groups Inside of the children key:

• First one based in the members key. If parent have members create this group else do nothing.

• Second one based in the idType of children.

The tree would then look like this:

var array_expected =
[{ "text" : "FCB", "children": [
   { "text" : "Members", "children":[{"text":"Lionel"}, {"text":"Pique"}]},
   {"text" : "Sports", "children": [
     {"text": "Football", "children": [{"text":"Members", "children":[{"text": "Pique"}]},{"text":"Categories", "children":[{"text": "UEFA 14", "children": [{"text": "Teams", "children": [{"text": "Team 1", "children": [{"text": "Members","children": [{"text": "Puyol"}, {"text": "Iniesta"}]}]}, {"text": "Team 2"}]}]}, {"text": "UEFA 15", "children":[{"text":"Members", "children": [{"text": "Xavi"}]}]}]}]},
     {"text": "Basketball", "children":[{"text":"Members", "children":[{"text": "Pique"}]},{"text":"Categories", "children":[{"text": "NBA 14"}, {"text": "NBA 15"}]}]}]},
      ] }
]

$(function() {
    $("#expected_jstree").jstree({
      'core' : {
      	'themes': {
		      'responsive': true
		    },            	
        'data' : array_expected        
      }      
    });   
    
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

<div id="expected_jstree"></div>

I have made this function but I don't know how to group the children by type and how to add the group Members if the element has no children (For example: UEFA 15 has members but not shown).

var array = [
        {"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
        {"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
        {"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
        {"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
        {"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
        {"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
        {"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
        {"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
        ]

function create_jstree(array){
    var parent = [], children = {};
    
    for (var i = 0, len = array.length; i < len; ++i) {
      var item = array[i],
      idParent = item.idParent,
      target = !idParent ? parent : (children[idParent] || (children[idParent] = []));
      
      target.push({ text: item.name, id: item.id, idParent: item.idParent, Members: item.Members, idType: item.idType});
    }
    
    var find_child = function(parent) {
      if(children[parent.id]) {
        
        if(parent.Members.length >= 1){
          var members = [];
          for(var i = 0; i < parent.Members.length; i++){
            members.push({text: parent.Members[i].name})
          }
          children[parent.id].splice(0, 0, {text: "Members", children: members});
        }
        
        parent.children = children[parent.id];
        
        for (var i = 0, len = parent.children.length; i < len; ++i) {
          find_child(parent.children[i]);
        }
      }
    };
    
    for (var y = 0, leng = parent.length; y < leng; ++y) {
      find_child(parent[y]);
    }
    return parent;
  }
  
  $(function() {
        $("#jstree_try").jstree({
          'core' : {
          	'themes': {
    		      'responsive': true
    		    },            	
            'data' : create_jstree(array)        
          }      
        });   
        
      });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

<div id="jstree_try"></div>

Answer 1

Try doing like this.

var array = [
    {"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
    {"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
    {"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
    {"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
    {"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
    {"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
    {"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
    {"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
    ]

function create_jstree(array){
  var resultArray = [];
  array.forEach((element) => {
      let object1;
      if(element.idParent!=""){
          object1 = {
              "text": element.name,
              "id":element.id,
              "children": createMembers(element)
          }
          let index=resultArray.findIndex( (resElement)=>resElement.id==element.idParent);
          if( index == -1){
              findParentAndPushChild(element,object1,resultArray)
          }
          else{ 
            resultArray[index].children.push(object1);
          }
      }
      else{
          object1 = {
              "text": element.name,
              "id":element.id,
              "children": createMembers(element)
          }
          resultArray.push(object1);
      }
  });
  return resultArray;
}
function findParentAndPushChild(element,object,resArray){
  resArray.forEach( (child)=> {
    if(child.id == element.idParent){
      child.children.push(object);
      return;
    }
    else if(child.children.length!=0){
      findParentAndPushChild(element,object,child.children);
    }
  });
  
}
function createMembers(element) {
  let tempArr=[];  
  if (element.Members && element.Members.length!=0) {
        tempArr.push({
            "text": "Members",
            "children": element.Members.map((member) => {
                return {
                    "text": member.name,
                    "children": []
                }
            })
        })
    }
  return tempArr;
}
$(function() {
  $("#jstree_try").jstree({
    'core' : {
      'themes': {
        'responsive': true
      },            	
      'data' : create_jstree(array)        
    }      
  });   
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

<div id="jstree_try"></div>