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

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]));
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>
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}