我在parsing以下json中遇到问题，以便在屏幕上显示所需内容。
以下是我在解析此json时应遵循的步骤：
1。我必须从stages获取array json - 例如阶段[“check_dependency_progress”，“shutdown_progress”，“backup_progress” ，“code_upgrade_progress”，“start_afresh_progress”]，“
2。从以上阶段check_dependency_progress和array 获取第一次的子对象shutdown_progress第二次，等等..
3。如果status === 3和stages.length > 0然后<li class="parent">object.title</li> 第2步对象的状态>
4. 如果status == 2从阶段数组中获取子对象，例如第2步。
5。如果在子对象中找到status == 3 ，则其他所有
**注意：**为方便起见，您可以"john-22:"继续解析
这是s jsfiddle：https://jsfiddle.net/eabangalore/uchwz3g5/211/
这是我的解决方案 - 不灵活+错误的结果+不可读：
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>
答案 0 :(得分：2)
这是走树的递归解决方案：
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;
}
看看jsfiddle：https://jsfiddle.net/so9eus5r/
<强>更新
以下是基于评论的更新jsfiddle：https://jsfiddle.net/cLLp10sq/