Загрузка данных JSON из URL для импорта в таблицу HTML

Я использую API Untappd для создания меню пива, и у меня есть вопрос.Загрузка данных JSON из URL для импорта в таблицу HTML

Я хочу отобразить данные 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>

Любая помощь будет здорово!

источник

2017-01-04 Arely Miramontes

почему имеет два источника 'jquery'? –

заголовок ответа установлен на приложения/JSON

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

источник

2017-01-04 21:04:30 rsh

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

Примечание: Там нет названия и поля пивоварня в данных так что эти значения будут выводиться как неопределенные.

источник

2017-01-04 21:21:58

Попробуйте

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

источник

2017-01-04 22:21:08

Загрузка данных JSON из URL для импорта в таблицу HTML

ответ

Смежные вопросы