Question

我正在使用Untappd API来构建啤酒菜单，我有一个问题。

我想显示服务器返回给我的JSON数据，并将其放入HTML表中。

当我创建一个list.json文件并通过我的代码导入它时，我有它工作，但每当我尝试使用URL本身时，它都不会提取数据。任何人都可以帮我解决这个问题吗？

下面的代码通过调用本地json文件来工作，但不能使用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>

任何帮助都会很棒！

Answer 1

JQuery需要Valid JSON才能对其进行解码。

如果您使用的是Firefox开发人员工具，则可以通过选择加载JSON文件的位置并查看“响应”子选项卡来查看网络选项卡中的JSON错误。

如果您想在弹出窗口中看到错误，可以将您的javascript更改为以下内容。

    $.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);
    });

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

注意：您的数据中没有名称和啤酒厂字段，因此这些值将以未定义的形式输出。

Answer 2

响应标头设置为application / json

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

Answer 3

试试这个

  $.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");
  });});

在json文件中，您有语法错误，因为没有引用引号

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

从URL加载JSON数据以在HTML表中导入

3 个答案: