将嵌套的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>