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 i.e 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/