Loading JSON data from URL to import in HTML table
Question
I am using the Untappd API to build a beer menu, and I have a question.
I want to display the JSON data that the server returns to me, and put it into a HTML table.
I have it working when I just create a list.json file and import it through my code, but whenever I try to use the URL itself, it does not pull the data. Can anyone help me figure this out?
The code below works by calling the local json file, but not with the URL.
json
"items": [
{
"id": xxx,
"section_id": xxx,
"position": x,
"untappd_id": xxx,
"label_image": "xxx",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": xx
},
{
"id": xxx,
"section_id": xxx,
"position": x,
"untappd_id": xxx,
"label_image": "xxx",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": xx
},
...
HTML/JS
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script>
$(function() {
var beer = [];
$.getJSON('test.json', function(data) {
$.each(data.items, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
"<td>" + f.brewery + "</td>" + "<td>" + f.ibu + "</td>" + "<td>" + f.abv + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id="userdata" border="2">
<thead>
<th>Beer Name</th>
<th>Brewery</th>
<th>IBU</th>
<th>ABV</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Any help would be great!
3 answers
solution1
1 2017-01-04 21:21:58
JQuery requires Valid JSON to decode it.
If you are using Firefox developer tools you can see the JSON errors in the network tab by selecting where your JSON file is being loaded and looking at the "response" sub-tab.
If you want to see the error in a popup you can change your javascript to the following.
$.getJSON('test.json', function(data) {
console.log(data);
$.each(data.items, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
"<td>" + f.brewery + "</td>" + "<td>" + f.ibu + "</td>" + "<td>" + f.abv + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
}).error(function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
});
Changing the JSON code to the following will repair the problem. Notice string values are quoted and curly braces are used to define the data as an object.
{"items": [
{
"id": "xxx",
"section_id": "xxx",
"position": "x",
"untappd_id": "xxx",
"label_image": "xxx",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": "xx"
},
{
"id": "xxx",
"section_id": "xxx",
"position": "x",
"untappd_id": "xxx",
"label_image": "xxx",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": "xx"
}]}
Note: There is no name and brewery field in your data so those values will be output as undefined.
solution2
0 2017-01-04 21:04:30
Response header set to application/json
ServletOutputStream outputStream = response.getOutputStream();
response.setContentType("application/json;charset=UTF-8");
outputStream.print(new Gson().toJson(objToSerialize));
solution3
0 2017-01-04 22:21:08
Try this
$.getJSON("file.json", function(json) {
$.each(json.items, function(i,data){
//i is index of array
var r = "<tr>"+
"<td>"+data.id+"</td>"+
"<td>"+data.section_id+"</td>"+
"<td>"+data.position+"</td>"+
"<td>"+data.untappd_id+"</td>"+
"<td>"+data.label_image+"</td>"+
"<td>"+data.brewery_location+"</td>"+
"<td>"+data.abv+"</td>"+
"<td>"+data.ibu+"</td>"+
"<td>"+data.cask+"</td>"+
"<tr>";
$(r).appendTo("#userdata");
});});
In json file you have a syntax errors, for not putting the quotes
{"items":[
{
"id": 22,
"section_id": 2222,
"position": 3,
"untappd_id":5,
"label_image": "imgds",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": "xx"
},
{
"id": "xxx",
"section_id": "xxx",
"position": "x",
"untappd_id": "xxx",
"label_image": "xxx",
"brewery_location": "xxx",
"abv": "xx",
"ibu": "xx",
"cask": "xx"
} ]}
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.