嵌套的JSON到不同的HTML表

问题描述 投票：0回答：1

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/。

请告诉我如何才能这样做。

javascript html json html-table
1个回答
1
投票

首先，你使用可变qazxsw poi的相同循环2次 - 这样你多次增加'id'。

i

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

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

最后得到单元格值你需要使用for (var j = 0; j < myList[i].length; j++) { 和i的先前值而不仅仅是j

myList[0]

这里的工作代码：qazxsw poi

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.