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>

Answer 2

Okay so if you want to use the fetch api, use this documentation as a reference: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

How it works in laymans terms is:

   let data = {} // assigning data to an empty object
   let url = "https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002"

   fetch(url)
    .then(function(response) {
        // Here you get the data variable to modify as you please for example storing it
        this.data = response
       })
     })
    .catch(function(error) {
      // If there is any error you will catch and deal with them here
    });

  // you can now manipulate the data object
  console.log(data);

Notes to take away.

By storing the response of the fetch function into the data object I declared, you can now manipulate the object

URL can be replaced with whatever url you want, or logic to assign the correct url, as I assume that scheduled journeys may need to point to a different api url.

I'd also consider learning a library to incorporate into your project like RxJs to learn how to call the "subscribe" method on urls.

Answer 3

Yes it's possible to do that.

I'm assuming here that you use a GET method for the URL.

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

var req = new XMLHttpRequest();
req.open("GET", url, true);

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

req.onreadystatechange = function () {
    if (req.readyState === 4) {
        if (req.status === 200) {
            if (req.responseText !== "some error text or format"){
                var data = JSON.parse(req.responseText);
                populateTable(data);
            }
        }
    }
};

req.send();

The populateTable is a method used to fill the Table with the data fetched from the server.

The data variable is a list of JSON objects, which will be received as such.

[{"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","ScheduledDepartureTime":"2018-08-07 05:29:00","ArrivalTime":"","DepartureTime":"","ScheduledHeadway":"","ActualHeadway":"","JourneyId":"6208436","ServiceGroup":"Greenwave","NumberStops":"17","StartPoint":"St Mary's Butts","EndPoint":"Madejski Stadium Inbound","Latitude":"51.42576333","Longitude":"-0.99406500","District":"","JourneyType":"TT"},{"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","ScheduledDepartureTime":"2018-08-07 05:49:00","ArrivalTime":"","DepartureTime":"","ScheduledHeadway":"","ActualHeadway":"","JourneyId":"6208366","ServiceGroup":"Greenwave","NumberStops":"11","StartPoint":"St Mary's Butts","EndPoint":"Lime Square","Latitude":"51.42576333","Longitude":"-0.99406500","District":"","JourneyType":"TT"}, ...]