我有一个响应JSON,我试图将其转换为html表。响应如下。
{
"MySaves:a-us": {
"addAnItemToMySaves": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": "headers cannot be null",
"Source addAnItemToMySaves": "Pass",
"addAnItemToMySaves": "fail"
},
"moveItemFromBagToMySaves": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": null,
"addItemToCart": "fail",
"moveItemFromBagToMySaves": "fail"
},
"currentMySavesList": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": "headers cannot be null",
"addItemToCart": "fail",
"moveItemFromBagToMySaves": "fail",
"Source currentMySavesList": "Pass",
"currentMySavesList": "fail"
}
},
"Product:a-us": {
"itemSizeGuide": {
"Overall": "Pass",
"Source itemSizeGuide": "Pass",
"Target itemSizeGuide": "Pass"
},
"productItem": {
"Overall": "Pass",
"Source productItem": "Pass",
"Target productItem": "Pass"
},
"productDetails": {
"Overall": "Pass",
"Source productDetails": "Pass",
"Target productDetails": "Pass"
},
"inventoryByStore": {
"Overall": "Pass",
"Source inventoryByStore": "Pass",
"Target inventoryByStore": "Pass"
},
"returnProductList": {
"Overall": "Pass",
"Source returnProductList": "Pass",
"Target returnProductList": "Pass"
}
},
"Share:a-us": {
"getAShare": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": null,
"addItemToCart": "fail",
"getAShare": "fail"
}
}
}
我想要第一列的根节点和第二列的子节点名称,第三列的总体状态,如果总体失败,则第四列错误。我是JSON新手,所以想知道什么是最好的方法。
答案 0 :(得分:1)
var json={
"MySaves:a-us": {
"addAnItemToMySaves": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": "headers cannot be null",
"Source addAnItemToMySaves": "Pass",
"addAnItemToMySaves": "fail"
},
"moveItemFromBagToMySaves": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": null,
"addItemToCart": "fail",
"moveItemFromBagToMySaves": "fail"
},
"currentMySavesList": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": "headers cannot be null",
"addItemToCart": "fail",
"moveItemFromBagToMySaves": "fail",
"Source currentMySavesList": "Pass",
"currentMySavesList": "fail"
}
},
"Product:a-us": {
"itemSizeGuide": {
"Overall": "Pass",
"Source itemSizeGuide": "Pass",
"Target itemSizeGuide": "Pass"
},
"productItem": {
"Overall": "Pass",
"Source productItem": "Pass",
"Target productItem": "Pass"
},
"productDetails": {
"Overall": "Pass",
"Source productDetails": "Pass",
"Target productDetails": "Pass"
},
"inventoryByStore": {
"Overall": "Pass",
"Source inventoryByStore": "Pass",
"Target inventoryByStore": "Pass"
},
"returnProductList": {
"Overall": "Pass",
"Source returnProductList": "Pass",
"Target returnProductList": "Pass"
}
},
"Share:a-us": {
"getAShare": {
"Overall": "fail",
"sourceGuestLogin": "Pass",
"guestLogin": "fail",
"error": null,
"addItemToCart": "fail",
"getAShare": "fail"
}
}
}
var tableRows="<table>";
Object.keys(json).forEach(function(k){
var secondLevel=json[k];
var first=true;
var rowSpan=Object.keys(secondLevel).length;
tableRows=tableRows+"<tr><td rowspan="+rowSpan+">"+k+"</td>";
Object.keys(secondLevel).forEach(function(sk){
if(!first){
tableRows=tableRows+"<tr>";
}
tableRows=tableRows+"<td>"+sk+"</td>";
var thirdLevel=json[k][sk];
tableRows=tableRows+"<td>"+thirdLevel.Overall+"</td>";
if(thirdLevel.Overall==="fail"){
tableRows=tableRows+"<td>"+thirdLevel.error+"</td>";
}else{
tableRows=tableRows+"<td></td>";
}
tableRows=tableRows+"</tr>";
first=false;
});
});
tableRows=tableRows+"</table>";
document.getElementById("tableDiv").innerHTML=tableRows;
table, th, td {
border: 1px solid black;
}
<div id="tableDiv"></div>