how do i loop through json based on stages array given

Question

I have problem in parsing the below json to show the desired out on the screen.

Here are the steps I supposed to follow while parsing this json :

1. I have to get the stages array from the json - for example stages ["check_dependency_progress", "shutdown_progress", "backup_progress", "code_upgrade_progress", "start_afresh_progress"],`

2. Get the sub object ie check_dependency_progress for the first time from above stages array and shutdown_progress second time , and so on..

3. I have to check the step 2 object for status if status === 3 and stages.length > 0 then <li class="parent">object.title</li>

4. If status == 2 get the sub-object from stages array like step 2 .

5. if status == 3 found in sub-object then else all

**NOTE:**for convenience you can take "john-22:" to proceed parsing

Here is s jsfiddle: https://jsfiddle.net/eabangalore/uchwz3g5/211/

Here is my solution - not flexible + wrong results + not readable:

 var upgradeData = { "upgrade": [{ "status": "UPGRADED", "updated_date": "14-02-2018 12:09:25", "description": "UPGRADE COMPLETED", "hostname": ["john-22", "john-945", "john-9453", "john-1453"], "version": "9.2", "_id": "5a7aef8407480a589a3a7dd7", "john-22": { "status": 2, "start_afresh_progress": { "status": 2, "description": "Started back the stopped services.", "title": "Starting back the process.", "start_back_services": { "status": 3, "stages": [], "description": "Started back the stopped services succesfully !", "title": "Starting back the stoped services of MW" }, "restart_webservice": { "status": 2, "stages": [], "description": "Restarting back the WebService.", "title": "Restart webservice" }, "stages": ["start_back_services", "restart_webservice"] }, "description": "Upgrading OrangeBell Started !", "shutdown_progress": { "status": 3, "shutdown_mw_progress": { "status": 3, "stages": [], "description": "OrangeBell services are sucessfully shutdown.", "title": "Shutting-down OrangeBell services" }, "description": "Completed Shutdown.", "title": "Shutdown in Progress.", "prepare_shutdown_progress": { "status": 3, "stages": [], "description": "OrangeBell services are prepared to be shutdown.", "title": "Shutting-down OrangeBell services" }, "get_current_status_progress": { "status": 3, "stages": [], "description": "OrangeBell services states have been saved.", "title": "Getting current state of running services" }, "stages": ["get_current_status_progress", "prepare_shutdown_progress", "shutdown_mw_progress"] }, "stages": ["check_dependency_progress", "shutdown_progress", "backup_progress", "code_upgrade_progress", "start_afresh_progress"], "title": "Upgrading OrangeBell", "code_upgrade_progress": { "status": 3, "stages": [], "description": "Upgrade Completed Sucessfully!", "title": "Upgrading OrangeBell Code" }, "check_dependency_progress": { "status": 3, "copying_modules_progress": { "status": 3, "stages": [], "description": "Copying necessary modules succesfully !", "title": "Copying the modules" }, "description": "Checking of dependency files/packages completed.", "title": "Checking the Dependencies", "package_dependency_progress": { "status": 3, "stages": [], "description": "Successfully Installed the packages !", "title": "Resolving the packages" }, "stages": ["copying_modules_progress", "package_dependency_progress"] }, "backup_progress": { "status": 3, "stages": [], "description": "Backup Completed Sucessfully!", "title": "Backup in Progress." } } }] }; var allChildLi = ''; var allParentLi = '<ul>'; let foundObject = upgradeData.upgrade.map(function(o, i) { let objKeys = Object.keys(o); return objKeys; }); var newArray = foundObject[0]; function removeA(arr) { var what, a = arguments, L = a.length, ax; while (L > 1 && arr.length) { what = a[--L]; while ((ax = arr.indexOf(what)) !== -1) { arr.splice(ax, 1); } } return arr; } removeA(newArray, 'status'); removeA(newArray, 'updated_date'); removeA(newArray, 'description'); removeA(newArray, 'hostname'); removeA(newArray, 'version'); removeA(newArray, '_id'); var allUpgradeNode = []; for (var i = 0; i < newArray.length; i++) { var object = upgradeData.upgrade[i][newArray[i]]; console.log(object); var stages = object.stages; console.log('stages', stages); for (var j = 0; j < stages.length; j++) { console.log(object[stages[j]]); var childObject = object[stages[j]]; if (childObject.status == 3) { console.log('child description ', childObject.description); console.log('child title ', childObject.title); allParentLi += '<li>' + childObject.title + '</li>'; } else { for (k = 0; k < childObject.stages.length; k++) { var subChildObject = object[stages[k]]; console.log('sub child ', subChildObject); if (subChildObject.status == 3) { // if inside k console.log('sub child description ', subChildObject.description); console.log('sub child title ', subChildObject.title); // allParentLi += '<ul>'; //allParentLi += '<li class="child">'+subChildObject.description+'</li>'; //allParentLi += '<li class="child">'+subChildObject.title+'</li>'; allParentLi += '<li class="child">' + subChildObject.description + '</li>'; } else { // else inside k for (var l = 0; l < subChildObject.stages.length; l++) { var subChildCompletionObject = subChildObject[stages[l]]; console.log('sub sub child completion object', subChildCompletionObject); console.log('sub sub child', subChildCompletionObject.description); console.log('sub sub child', subChildCompletionObject.title); } } // endof if inside } } } } allParentLi += '</ul>'; $('#allLi').append(allParentLi); 

 ul li { list-style: none; display: block; width: 200px; height: 45px; border: 1px solid red; background-color: gray; text-align: center; position: relative; /* i'm unable make text center */ } ul li.child { right: -90px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <hr/> <div id="allLi"> </div> 

Answer 1

Here's a recursive solution for walking the tree:

const john22 = upgradeData.upgrade[0]['john-22'];
const stages = john22.stages.map(stage => john22[stage]);

let html = makeNodesList(john22)

$('#allLi').append(html);

function makeNodesList(stageObj) {
    let html = '<ul>';

  if (!(stageObj.status === 2 && stageObj.stages.length)) {
    html += `<li class="child">${stageObj.description}</li>`
  } else {
    html += `<li>${stageObj.description}</li>`
    stageObj.stages.forEach(substage => {
        html +=  makeNodesList(stageObj[substage]);
    })
  }

  html += '</ul>';

  return html;
}

Have a look at the jsfiddle: https://jsfiddle.net/so9eus5r/

UPDATE

Here's the updated jsfiddle based on the comments: https://jsfiddle.net/cLLp10sq/