Skip to content

Instantly share code, notes, and snippets.

@tankala
Created June 9, 2018 11:24
Show Gist options
  • Save tankala/b9fa414f607f16898bcdd932fdee32fc to your computer and use it in GitHub Desktop.
Save tankala/b9fa414f607f16898bcdd932fdee32fc to your computer and use it in GitHub Desktop.
HTML code for populating table with data which is present in json file with name jsonData.json
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function onLoad() {
var url = 'jsonData.json';
$.getJSON(url, function (json) {
var table = $('<table>');
table.attr('border', '1');
var tr = $('<tr>');
var td = $('<td>');
td.html("ID");
tr.append(td);
td = $('<td>');
td.html('Name');
tr.append(td);
td = $('<td>');
td.html('IDNumber');
tr.append(td);
table.append(tr);
for (var i = 0; i < json.length; i++) {
var tr = $('<tr>');
var td = $('<td>');
td.html(json[i].ID);
tr.append(td);
td = $('<td>');
td.html(json[i].Name);
tr.append(td);
td = $('<td>');
td.html(json[i].IDNumber);
tr.append(td);
table.append(tr);
}
$('body').append(table);
});
}
</script>
</head>
<body onload="onLoad();">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment