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