從URL加載JSON數據以導入HTML表

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需要使用有效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 個解決方案

解決方案1
1 2017-01-04 21:21:58

解決方案2
0 2017-01-04 21:04:30

解決方案3
0 2017-01-04 22:21:08

從URL加載JSON數據以導入HTML表

問題描述

3 個解決方案

解決方案1 1 2017-01-04 21:21:58

解決方案2 0 2017-01-04 21:04:30

解決方案3 0 2017-01-04 22:21:08

解決方案1
1 2017-01-04 21:21:58

解決方案2
0 2017-01-04 21:04:30

解決方案3
0 2017-01-04 22:21:08