Convert JSON data into dynamic table using HTML
Question
I have been searching the solution to my problem for four days, and I still can't solve it.
I want to convert a JSON string data (from an URL) into a dynamic table, using JQuery and JavaScript.
I have to load the JSON string using the jQuery.getJSON() function. I don't know how to combine those two things together.
I've been searching for forever and I still don't understand it. Sorry if I sound really stupid but I just can't make something out of it. Can someone please help me?
This is my code:
<html>
<head>
<h1> Inventory List </h1>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://wt.ops.few.vu.nl/api/--------"></script>
</head>
<body>
<script>
$(document).ready(function () {
$.getJSON(http://wt.ops.few.vu.nl/api/-------,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].category + "</td>");
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].amount + "</td>");
tr.append("<td>" + json[i].location + "</td>");
tr.append("<td>" + json[i].date + "</td>");
$('#table').append(tr);
}
});
});
</script>
<table id= "table">
<tr>
<th> Name of product</th>
<th> Category</th>
<th> Amount</th>
<th> Location</th>
<th> Date</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
2 answers
solution1
2 2016-01-14 19:06:56
I would advise using JSONP like so: https://jsfiddle.net/Twisty/0trde6es/5/
$(document).ready(function() {
getData();
function getData() {
$.ajax({
url: 'https://jsfiddle.net/echo/jsonp/',
method: 'GET',
dataType: "jsonp",
error: function(xhr, status, error) {
console.log(status, error);
},
success: function(json) {
var tr;
$.each(json, function(k, v) {
tr = $("<tr></tr>");
tr.append("<td>" + v.name + "</td>");
tr.append("<td>" + v.category + "</td>");
tr.append("<td>" + v.amount + "</td>");
tr.append("<td>" + v.location + "</td>");
tr.append("<td>" + v.date + "</td>");
$("#invList").append(tr);
});
}
});
}
});
Since the site may not be on the same domain, and is not using HTTPS, I created the result data in a1 for testing. I used the following test data:
[{"category": "Fruit", "name": "Banana", "amount": 15, "location": "Amsterdam", "date": "2014-10-05", "id": 13844}, {"category": "Fruit", "name": "Apple", "amount": 58, "location": "Amsterdam", "date": "2014-02-05", "id": 13845}, {"category": "Furniture", "name": "Chair", "amount": 3, "location": "Hilversum", "date": "2014-12-10", "id": 13846}, {"category": "Furniture", "name": "Table", "amount": 5, "location": "Rotterdam", "date": "2011-07-13", "id": 13847}]
Using $.each() is just a faster way of handling object data. There is nothing wrong with your for() loop and may work better depending on your needs.
solution2
0 2016-01-14 17:09:05
This should work
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1> Inventory List </h1>
<script>
$(document).ready(function () {
$.getJSON('http://wt.ops.few.vu.nl/api/--------',
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].category + "</td>");
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].amount + "</td>");
tr.append("<td>" + json[i].location + "</td>");
tr.append("<td>" + json[i].date + "</td>");
$('#table').append(tr);
}
});
});
</script>
<table id= "table">
<tr>
<th> Name of product</th>
<th> Category</th>
<th> Amount</th>
<th> Location</th>
<th> Date</th>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.