├── 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 | Id |
4 | Title |
5 | UserID |
6 |
7 |
8 |
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 |
--------------------------------------------------------------------------------