├── 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($("<td>" + rowData.id + "</td>"));
11 |     row.append($("<td>" + rowData.title + "</td>"));
12 | 	row.append($("<td>" + rowData.userId + "</td>")); 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <table id="personDataTable">
 2 |     <tr>
 3 |         <th>Id</th>
 4 |         <th>Title</th>
 5 |         <th>UserID</th>
 6 |     </tr>
 7 |     
 8 | </table>
 9 |         
10 | <style>
11 | table {
12 |   border: 2px solid #666;   
13 |     width: 100%;
14 | }
15 | th {
16 |   background: #f8f8f8; 
17 |   font-weight: bold;    
18 |     padding: 2px;
19 | }	
20 | </style>
21 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
22 | <script type="text/javascript" src="listify-json.js"></script>
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 = $("<tr />")
20 |     $("#personDataTable").append(row); 
21 |     row.append($("<td>" + rowData.id + "</td>"));
22 |     row.append($("<td>" + rowData.title + "</td>"));
23 |     row.append($("<td>" + rowData.userId + "</td>"));
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------