How to output all data from JSON file to HTML?

Question

JSON

There is a file - here . Can't get it out with code like this:

$(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>

With the link - learn.cf.ac.uk/webstudent/sem5tl/javascript/assign... , it works, but as soon as I insert my link there, the script does not produce anything.

Answer 1

It doesn't work, because the link you provided in the working example code can work with JSONP (when called with the callback parameter, the returned data is wrapped in a call to the specified function, try opening learn.cf.ac.uk/webstudent/sem5tl/javascript/assign... )
And the second link, with which you want to work, does not know how. Calling xn--80aqahnxhf0b.xn----7sbhaopdx2angr0b9ina.xn--p1... does not add any parameters.
BUT! this link you need gives a CORS permission header (Access-Control-Allow-Origin: * and related ones), so it can be requested directly by ajax through the usual JSON format.
Example: https://codepen.io/smilingcheater/pen/PozpmXK
Also note that the link you need has a different data format. See what exactly comes in and how to process it when displaying results