@phpneguru

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

Есть файл - Вот. Не получается вывести по такому коду:
$(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..., работает, но как только вставляю туда свою ссылку - скрипт ничего не выдает.
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
smilingcheater
@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
Так же обратите внимание, что в нужной вам ссылке другой формат данных. Смотрите что именно приходит и как это обрабатывать при выводе результатов
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы