[英]Nested JSON to different HTML tables
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/ 。
請讓我知道我該怎么做。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.