Как вывести все данные из JSON файла в HTML?

Question

[Даулет]

Есть файл - Вот. Не получается вывести по такому коду:

$(document).ready(function() {
  $.ajax({
    url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
    dataType: 'jsonp',
    jsonpCallback: 'drawTable'
  });
});

function drawTable(data) {
  var html = '';
  for (var i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i].course + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>';
  }
  $('#table tbody').append(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>Course</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Со ссылкой - learn.cf.ac.uk/webstudent/sem5tl/javascript/assign..., работает, но как только вставляю туда свою ссылку - скрипт ничего не выдает.

Answer 1

[smilingcheater]

Не работает, потому что указанная вами в рабочем примере кода ссылка умеет работать с JSONP (при вызове с параметром callback возвращаемые данные оборачиваются в вызов указанной функции, попробуйте открыть learn.cf.ac.uk/webstudent/sem5tl/javascript/assign... )

А вторая ссылка, с который вы хотите работать - так не умеет. Вызов xn--80aqahnxhf0b.xn----7sbhaopdx2angr0b9ina.xn--p1... никаких параметров не добавляет.

НО! эта нужная вам ссылка отдаёт разрешающий CORS-заголовок (Access-Control-Allow-Origin: * и сопутствующие), поэтому её можно запросить напрямую аяксом через обычный формат JSON.

Пример: https://codepen.io/smilingcheater/pen/PozpmXK
Так же обратите внимание, что в нужной вам ссылке другой формат данных. Смотрите что именно приходит и как это обрабатывать при выводе результатов

Comments

[Даулет]

Спасибо, не подскажите теперь как вывести значение к примеру с поля inn, name и profile?

function drawTable(data) {
      console.log('drawTable got data:', data);
  var html = '';
  for (var i = 0; i < data.length; i++) {
    html += '<tr><td>' + data[i].items.inn + '</td><td>' + data[i].items.name + '</td><td>' + data[i].items.profile + '</td></tr>';
  }
  $('#table tbody').append(html);
}

[smilingcheater]

phpneguru, не по тому полю итерируете. Массив - не в самом data, а в data.items

function drawTable(data) {
  var html = '';
  for (var i = 0; i < data.items.length; i++) {
    html += '<tr><td>' + data.items[i].inn + '</td><td>' + data.items[i].name + '</td><td>' + data.items[i].profile + '</td></tr>';
  }
  $('#table tbody').append(html);
}