How to get all childs in child for treeview?

Question

I have a return json data like this

  "data":[ 
      { 
         "taskAssignGroupId":123,
         "taskAssignGroupName":"Parent Pool",
         "taskAssignGroupDesc":"Parent Pool Desc",
         "state": true,
         "childPools":[ 
            { 
               "taskAssignGroupId":124,
               "taskAssignGroupName":"Child Pool Name",
               "taskAssignGroupDesc":"Child Pool Desc",
               "state":true,
               "childPools":[ 
                  { 
                     "taskAssignGroupId":125,
                     "taskAssignGroupName":"Child Child Pool Name",
                     "taskAssignGroupDesc":"Child Child Pool Desc",
                     "state":true,
                     "childPools":[ 

                     ]
                  }
               ]
            }
         ]
      }
]

So as you can see in the example I have a parent pool and child of the parent pool.

The main problem is child pool can be infinite. I mean the child pools can be 1, 5 or more. So in my code I can get just 1 child.

How can I show all childs with $.each function or using another option ?

So I use $.each for getting data like

var htmlStr = "";
var checked = '';
$.each(dataSet.data, function (itemId, item) {
    htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId+ '"  type="checkbox" />' + item.taskAssignGroupName+ '</label>'
    htmlStr += '<ul>'
    $.each(item.childPools, function (index, child) {
        if (child.state) {
            checked = 'checked=checked';
        }
        else {
            checked = '';

        }
        htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId+ '" type="checkbox" />' + child.taskAssignGroupName+ "-" + child.taskAssignGroupDesc+ '</label></li>'
    });

    htmlStr += '</ul>'
    htmlStr += '</li>'
});

$('#treeview').html(htmlStr)

$("#treeview").hummingbird();

Thanks !

Answer 1

Take a look at the demo,

I've created a function that we calls, everytime we have a childPools with data.

function pool(pools) {
  $.each(pools, function(index, child) {
    if (child.state) {
      checked = 'checked=checked';
    } else {
      checked = '';
    }
    htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'

    if (child.childPools.length > 0) {
      htmlStr += '<ul>'
      pool(child.childPools)
      htmlStr += '</ul>'
    }
  });
}

WORKING DEMO

var dataSet = {
  "data": [{
    "taskAssignGroupId": 123,
    "taskAssignGroupName": "Parent Pool",
    "taskAssignGroupDesc": "Parent Pool Desc",
    "state": true,
    "childPools": [{
      "taskAssignGroupId": 124,
      "taskAssignGroupName": "Child Pool Name",
      "taskAssignGroupDesc": "Child Pool Desc",
      "state": true,
      "childPools": [{
        "taskAssignGroupId": 125,
        "taskAssignGroupName": "Child Child Pool Name",
        "taskAssignGroupDesc": "Child Child Pool Desc",
        "state": true,
        "childPools": [

        ]
      }]
    }]
  }]
}


var htmlStr = "";
var checked = '';
$.each(dataSet.data, function(itemId, item) {
  htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId + '"  type="checkbox" />' + item.taskAssignGroupName + '</label>'
  htmlStr += '<ul>'
  if (item.childPools.length > 0) {
    pool(item.childPools)
  }


  htmlStr += '</ul>'
  htmlStr += '</li>'
});

function pool(pools) {
  $.each(pools, function(index, child) {
    if (child.state) {
      checked = 'checked=checked';
    } else {
      checked = '';
    }
    htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'

    if (child.childPools.length > 0) {
      htmlStr += '<ul>'
      pool(child.childPools)
      htmlStr += '</ul>'
    }
  });
}

$('#treeview').html(htmlStr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="treeview">
</ul>