├── README.md ├── index.html └── listify-json.js /README.md: -------------------------------------------------------------------------------- 1 | # JSON-list 2 | JSON URL to HTML List 3 | 4 | Grab data from JSON URL and list in a table. 5 | 6 | Update URL in listify-json.js for your json URL. 7 | 8 | Change id, title, userId with the field names from your JSON output. 9 | 10 | row.append($("" + rowData.id + "")); 11 | row.append($("" + rowData.title + "")); 12 | row.append($("" + rowData.userId + "")); 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
IdTitleUserID
9 | 10 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /listify-json.js: -------------------------------------------------------------------------------- 1 | 2 | $.ajax({ 3 | url: 'https://jsonplaceholder.typicode.com/posts', 4 | type: "get", 5 | dataType: "json", 6 | 7 | success: function(data) { 8 | drawTable(data); 9 | } 10 | }); 11 | 12 | function drawTable(data) { 13 | for (var i = 0; i < data.length; i++) { 14 | drawRow(data[i]); 15 | } 16 | } 17 | 18 | function drawRow(rowData) { 19 | var row = $("") 20 | $("#personDataTable").append(row); 21 | row.append($("" + rowData.id + "")); 22 | row.append($("" + rowData.title + "")); 23 | row.append($("" + rowData.userId + "")); 24 | } 25 | 26 | --------------------------------------------------------------------------------