从 URL 加载 JSON 数据以导入 HTML 表答案

【问题标题】：Loading JSON data from URL to import in HTML table从 URL 加载 JSON 数据以导入 HTML 表
【发布时间】：2017-05-19 06:56:49
【问题描述】：

我正在使用 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>

任何帮助都会很棒！

【问题讨论】：

为什么你有两个jquery的来源？

标签： javascript html json api html-table

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

JQuery 需要有效的 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" 
}]}

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

【讨论】：

【解决方案3】：

响应头设置为 application/json

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

【讨论】：