Json to html table

Convert json data to a html table

var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $(selector).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, selector) {
  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));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

Source: stackoverflow.com

Json to html table

Convert JSON to HTML Table
Step 1: Select your input. Option 1 - Choose JSON file Encoding. Option 2 - Enter an URL. ...
Step 2: Choose output options (optional) Output Field Separator: , ; : Bar-| Tab Other-Choose. Include header in first row. ...
Step 3: Generate output. Result Data: Save your result: .htm Download Result EOL:

Similar codes

0 vote132 views1 answer
Html - How to horizontally center an element
Html
18 votes106 views2 answers
How to add script in html head
Html
0 vote109 views1 answer
How to revert php artisan ui vue --auth
Html
0 vote114 views1 answer
If n and m vary inversely given that n = 1.4, m =1.2 then the constant of proportionality = ________
Html
0 vote107 views1 answer
Index.html favicon.ico 404 (Not Found)
Html
0 vote437 views1 answer
Emmet vscode twig
Html
25 votes115 views4 answers
Metadata
Html
0 vote68 views1 answer
Html play audio programmatically
Html
0 vote108 views1 answer
Ondrag event in html
Html
0 vote149 views1 answer
Use pascalcase for react components, or lowercase for html elements.
Html