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!

why you has two source of jquery?

binpy
– binpy

2017-01-04 20:57:40 +00:00
Commented Jan 4, 2017 at 20:57 — binpy
– binpy, Commented Jan 4, 2017 at 20:57

Ralph Ritoch · Accepted Answer · 2017-01-04 21:21:58Z

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.

rsh · Accepted Answer · 2017-01-04 21:04:30Z

0

Response header set to application/json

ServletOutputStream outputStream = response.getOutputStream();
response.setContentType("application/json;charset=UTF-8");
outputStream.print(new Gson().toJson(objToSerialize));

answered Jan 4, 2017 at 21:04

rsh

794 bronze badges

Comments

ZoroTak · Accepted Answer · 2017-01-04 22:21:08Z

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"
} ]}

Collectives™ on Stack Overflow

Loading JSON data from URL to import in HTML table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related