Nested JSON to different HTML tables
Question
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>
I'm writing a code where there is a json result and using this result I want to form tables using javascript.
Here is my 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"
}]
]
here when my job is to convert json into HTML Tables.
Here the json is like a big item and then each item has other items.
When I run my program, it just returns the heading. but I want the entire response printed in different tables (the inside array variables). In my current case, we've got 4 as total size. ie there should be 4 tables created with different tag.
Here is the fiddle (this is not working) http://jsfiddle.net/7MRx6/1922/ .
please let me know on how can I do this.
1 answers
solution1
1 ACCPTED 2017-12-19 19:06:10
First of all you used 2 times the same loop with variable i - this way you incremented 'i' mulitple times.
for (var i = 0; i < myList.length; i++) { //...
Second thing you used myList without [i] in the second loop so you did actually 2 times the same thing but with double loop
for (var j = 0; j < myList[i].length; j++) {
And last thing to get cell value you need use previous values of i and j not just myList[0]
var cellValue = myList[i][j][columns[colIndex]];
Wroking code here: fiddle here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Nested JSON to HTML Tables - React JS
Combination of JSON values to different HTML tables
Displaying nested JSON tables
JSON objects and HTML tables
CSS not applied on nested HTML tables
Nested HTML Tables not displaying properly
Convert nested json to html
Nested JSON to HTML in JavaScript
JSON data to multiple html tables
conversion from JSON to html tables
Related Tags