將嵌套的JSON數據轉換為HTML表

Question

我有一個響應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的新手，所以想知道什么是最好的方法。

Answer 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>