将 JSON 嵌套到不同的 HTML 表答案

【问题标题】：Nested JSON to different HTML tables将 JSON 嵌套到不同的 HTML 表
【发布时间】：2018-06-02 06:14:50
【问题描述】：

var myList = [
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ruleNo": "1",
    "ingredients": "sulphates",
    "id": "2"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "1",
    "ingredients": "alcohol",
    "id": "1"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "1",
    "ingredients": "total sulfur dioxide",
    "id": "3"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "3",
    "ingredients": "sulphates",
    "id": "8"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "81.5",
    "ruleNo": "3",
    "ingredients": "total sulfur dioxide",
    "id": "9"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "3",
    "ingredients": "alcohol",
    "id": "7"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "2",
    "ingredients": "total sulfur dioxide",
    "id": "6"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ingredients": "sulphates",
    "id": "5"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "2",
    "ingredients": "alcohol",
    "id": "4"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "4",
    "ingredients": "sulphates",
    "id": "11"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "155",
    "ruleNo": "4",
    "ingredients": "total sulfur dioxide",
    "id": "12"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "min": "8.5",
    "target_state": "5",
    "min_operator": "<=",
    "max_operator": " ",
    "target_parameter": "Quality",
    "ruleNo": "4",
    "ingredients": "alcohol",
    "id": "10"
  }]
];

// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
  alert(myList.length)
  for (var i = 0; i < myList.length; i++) {
    var columns = addAllColumnHeaders(myList[0]);

    for (var i = 0; i < myList.length; i++) {
      var row$ = $('<tr/>');
      for (var colIndex = 0; colIndex < columns.length; colIndex++) {
        var cellValue = myList[0][columns[colIndex]];

        if (cellValue == null) {
          cellValue = "";
        }

        row$.append($('<td/>').html(cellValue));
      }
      $("#excelDataTable").append(row$);
    }
  }

  // Adds a header row to the table and returns the set of columns.
  // Need to do union of keys from all records as some records may not contain
  // all records
  function addAllColumnHeaders(myList) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
      var rowHash = myList[i];
      for (var key in rowHash) {
        if ($.inArray(key, columnSet) == -1) {
          columnSet.push(key);
          headerTr$.append($('<th/>').html(key));
        }
      }
    }
    $("#excelDataTable").append(headerTr$);

    return columnSet;
  }
}

th {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="buildHtmlTable()">
  <table id="excelDataTable" border="1">
  </table>
</body>

我正在编写一个有 json 结果的代码，并使用这个结果我想使用 javascript 形成表格。

这是我的 JSON

 [
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ruleNo": "1",
    "ingredients": "sulphates",
    "id": "2"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "1",
    "ingredients": "alcohol",
    "id": "1"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "1",
    "ingredients": "total sulfur dioxide",
    "id": "3"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "3",
    "ingredients": "sulphates",
    "id": "8"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "81.5",
    "ruleNo": "3",
    "ingredients": "total sulfur dioxide",
    "id": "9"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "3",
    "ingredients": "alcohol",
    "id": "7"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "2",
    "ingredients": "total sulfur dioxide",
    "id": "6"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ingredients": "sulphates",
    "id": "5"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "2",
    "ingredients": "alcohol",
    "id": "4"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "4",
    "ingredients": "sulphates",
    "id": "11"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "155",
    "ruleNo": "4",
    "ingredients": "total sulfur dioxide",
    "id": "12"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
       "ruleNo": "4",
    "ingredients": "alcohol",
    "id": "10"
  }]
]
    [
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "0.575",
        "ruleNo": "1",
        "ingredients": "sulphates",
        "id": "2"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "1",
        "ingredients": "alcohol",
        "id": "1"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "98.5",
        "ruleNo": "1",
        "ingredients": "total sulfur dioxide",
        "id": "3"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "1.98",
        "ruleNo": "3",
        "ingredients": "sulphates",
        "id": "8"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "81.5",
        "ruleNo": "3",
        "ingredients": "total sulfur dioxide",
        "id": "9"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "3",
        "ingredients": "alcohol",
        "id": "7"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "98.5",
        "ruleNo": "2",
        "ingredients": "total sulfur dioxide",
        "id": "6"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "0.575",
         "ruleNo": "2",

        "ingredients": "sulphates",
        "id": "5"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "2",
        "ingredients": "alcohol",
        "id": "4"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "1.98",
        "ruleNo": "4",
        "ingredients": "sulphates",
        "id": "11"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "155",
        "ruleNo": "4",
        "ingredients": "total sulfur dioxide",
        "id": "12"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "4",
        "ingredients": "alcohol",
        "id": "10"
      }]
    ]

当我的工作是将 json 转换为 HTML 表格时。

这里的 json 就像一个大项目，然后每个项目都有其他项目。

当我运行我的程序时，它只返回标题。但我希望将整个响应打印在不同的表中（内部数组变量）。在我目前的情况下，我们的总大小为 4。即应该有 4 个使用不同标签创建的表。

这是小提琴（这不起作用）http://jsfiddle.net/7MRx6/1922/。

请告诉我该怎么做。

【问题讨论】：

请将您的代码添加到问题本身。如果该小提琴消失或被修改，您的问题将立即失去它可能为社区提供的任何长期价值。
@Amy 感谢您的快速提示:-)，我的代码有点大，所以我想我会把它放在那里。小提琴中还有更多可用的变量。再次感谢！
一旦问题包含所有代码，我将收回我的反对票。那不是小费。 A question should be able to stand on its own.

标签： javascript html json html-table

【解决方案1】：

首先，您使用变量 i 使用了 2 次相同的循环 - 这样您就增加了 'i' 多次。

for (var i = 0; i < myList.length; i++) { //...

您在第二个循环中使用 myList 而没有 [i] 的第二件事，所以实际上您做了 2 次相同的事情，但使用了双循环

for (var j = 0; j < myList[i].length; j++) {

最后一件事要获得单元格值，您需要使用以前的 i 和 j 值，而不仅仅是 myList[0]

var cellValue =  myList[i][j][columns[colIndex]];

这里的工作代码：fiddle here

【讨论】：

是的，你完全明白了
很好，请不要忘记选中标记，但首先按照@Amy 的建议在您的问题中添加其余代码:) 顺便说一句，您的代码有点混乱，您可以以更清晰的方式完成整个工作。
@user3872094 如果此答案解决了您的问题，请单击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。