Getting data from json url

Question

I need to write a HTML script which extracts data from a json api and displays it in a table format.

The URL is https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002 and I need to pull out the LineRef and ScheduledArrivalTime data.

At the moment, I have manually copied and pasted the data from the URL into an object within the script tag and extracted the data like this but is there anyway I can parse the data straight from the URL itself?

var myObj, i, x = "";
myObj = {
  "data": [{
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "53a",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:12:00",
    "LiveJourneyId": "0",
    "Sequence": "10",
    "RunningBoard": "50A",
    "Duty": "1601",
    "Direction": "Outbound",
    "JourneyCode": "1",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP649",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 05:29:00"
  }, {
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "53",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:35:00",
    "LiveJourneyId": "0",
    "Sequence": "6",
    "RunningBoard": "50B",
    "Duty": "1602",
    "Direction": "Outbound",
    "JourneyCode": "3",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP625",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 05:49:00"
  }, {
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "53a",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:55:00",
    "LiveJourneyId": "0",
    "Sequence": "10",
    "RunningBoard": "50A",
    "Duty": "1601",
    "Direction": "Outbound",
    "JourneyCode": "7",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP649",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 06:13:00"
  }, {
    "Site": "RTL",
    "Operator": "RGB",
    "LineRef": "52a",
    "DepotCode": "RGB",
    "LocationCode": "039026170002",
    "LocationName": "300 Longwater Ave",
    "ScheduledStartTime": "2018-08-07 05:57:00",
    "LiveJourneyId": "0",
    "Sequence": "2",
    "RunningBoard": "50B",
    "Duty": "1602",
    "Direction": "Inbound",
    "JourneyCode": "2",
    "VehicleCode": "",
    "DriverCode": "",
    "TimingPoint": "TimingPoint",
    "JourneyPattern": "JP606",
    "ArrivalStatus": "",
    "DepartureStatus": "",
    "ScheduledArrivalTime": "2018-08-07 06:00:00"
  }]
}

x += "<table border='1'>"
for (i in myObj.data) {
  x += "<tr><td>" + myObj.data[i].LineRef + "</td>" + "<td>" + myObj.data[i].ScheduledArrivalTime[11] + myObj.data[i].ScheduledArrivalTime[12] + myObj.data[i].ScheduledArrivalTime[13] + myObj.data[i].ScheduledArrivalTime[14] + myObj.data[i].ScheduledArrivalTime[15] + "</td></tr>";
}

x += "</table>"
document.getElementById("demo").innerHTML = x;

<p id="demo"></p>

I've tried looking into methods like getJSON and fetch() but I am relatively new to JS so I couldn't understand how to apply them to my script. Any comments in the script would also be useful for me

Answer 1

This WOULD have worked if CORS was enabled on their servers. It isn't so you will have to add a proxy, e.g. change

https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002.json

to

"yourserver.com/myproxy.php?url="+encodeURIComponent("https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002.json")

and have yourproxy.php fetch the passed url

This code will give

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

$.getJSON("https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002.json", function(myObj) {

  var x = "<table border='1'>"
  for (var o in myObj.data) {
    x += "<tr><td>" + myObj.data[i].LineRef + "</td>" + "<td>" + myObj.data[o].ScheduledArrivalTime[11] + myObj.data[o].ScheduledArrivalTime[12] + myObj.data[o].ScheduledArrivalTime[13] + myObj.data[o].ScheduledArrivalTime[14] + myObj.data[o].ScheduledArrivalTime[15] + "</td></tr>";
  }

  x += "</table>"
  $("#demo").html(x);
})

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