convert json data to a html table

Solutions on MaxInterview for convert json data to a html table by the best coders in the world

Search
showing results for - "convert json data to a html table"
Filippo
30 Jun 2018
1var _table_ = document.createElement('table'),
2  _tr_ = document.createElement('tr'),
3  _th_ = document.createElement('th'),
4  _td_ = document.createElement('td');
5
6// Builds the HTML Table out of myList json data from Ivy restful service.
7function buildHtmlTable(arr) {
8  var table = _table_.cloneNode(false),
9    columns = addAllColumnHeaders(arr, table);
10  for (var i = 0, maxi = arr.length; i < maxi; ++i) {
11    var tr = _tr_.cloneNode(false);
12    for (var j = 0, maxj = columns.length; j < maxj; ++j) {
13      var td = _td_.cloneNode(false);
14      cellValue = arr[i][columns[j]];
15      td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
16      tr.appendChild(td);
17    }
18    table.appendChild(tr);
19  }
20  return table;
21}
22
23// Adds a header row to the table and returns the set of columns.
24// Need to do union of keys from all records as some records may not contain
25// all records
26function addAllColumnHeaders(arr, table) {
27  var columnSet = [],
28    tr = _tr_.cloneNode(false);
29  for (var i = 0, l = arr.length; i < l; i++) {
30    for (var key in arr[i]) {
31      if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
32        columnSet.push(key);
33        var th = _th_.cloneNode(false);
34        th.appendChild(document.createTextNode(key));
35        tr.appendChild(th);
36      }
37    }
38  }
39  table.appendChild(tr);
40  return columnSet;
41}
42
43document.body.appendChild(buildHtmlTable([{
44    "name": "abc",
45    "age": 50
46  },
47  {
48    "age": "25",
49    "hobby": "swimming"
50  },
51  {
52    "name": "xyz",
53    "hobby": "programming"
54  }
55]));
source
Antonio
14 Nov 2016
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
3<body onLoad="buildHtmlTable('#excelDataTable')">
4  <table id="excelDataTable" border="1">
5  </table>
6</body>
source
Elijah
08 Jan 2019
1var myList = [
2  { "name": "abc", "age": 50 },
3  { "age": "25", "hobby": "swimming" },
4  { "name": "xyz", "hobby": "programming" }
5];
6
7// Builds the HTML Table out of myList.
8function buildHtmlTable(selector) {
9  var columns = addAllColumnHeaders(myList, selector);
10
11  for (var i = 0; i < myList.length; i++) {
12    var row$ = $('<tr/>');
13    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
14      var cellValue = myList[i][columns[colIndex]];
15      if (cellValue == null) cellValue = "";
16      row$.append($('<td/>').html(cellValue));
17    }
18    $(selector).append(row$);
19  }
20}
21
22// Adds a header row to the table and returns the set of columns.
23// Need to do union of keys from all records as some records may not contain
24// all records.
25function addAllColumnHeaders(myList, selector) {
26  var columnSet = [];
27  var headerTr$ = $('<tr/>');
28
29  for (var i = 0; i < myList.length; i++) {
30    var rowHash = myList[i];
31    for (var key in rowHash) {
32      if ($.inArray(key, columnSet) == -1) {
33        columnSet.push(key);
34        headerTr$.append($('<th/>').html(key));
35      }
36    }
37  }
38  $(selector).append(headerTr$);
39
40  return columnSet;
41}
source
similar questions
display json data in html table using javascript dynamicallyget json information into html control with javascriptconverting response in jsonchange js to jsonhtml working with json datahow to transpose json dataconvert json to arrayhow draw table from json ajaxload data from json server into html using jqueryconvert data into json format in javascripthow to display image in html from json objecthow to convert serilazed data to json in jsjson to formdatajson data from server into html tableword table to jsonjson to yamljquery json to tablechange to json stringhow to display json data in htmljson object in html page
queries leading to this page
json to table htmlconvert json response to html tablejson data into html tablehtml table to jsonconvert json to html table c 23convert html table in jsonconvert html to json tablehtml json to tableconvert json data into html tablejson to html tablejava util to convert json to html tableconvert html table into jsonjava json to html table stringtable html to jsonhow to convert json data to htmlconvert html table to jsonput json data into html tableconvert json to html table javahow to convert json data to html tablemy json data to html tablehow to put json data into html tableconvert json to html tableparse html table and convert to jsonconvert json object to html tablehtml table to json converterhtml convert table into json satahow to convert json data to tablehow to convert json array into the html tablejson data to html tableconvert table data to jsonhow to convert json to html tableconvert html table into json datahtml convert table into json dataconvert json to html table javascriptconvert json data to a html tablejson object to html tablejson to html table codeconvert json data to a html table