title: Getting data from json url
body: <p>I need to write a HTML script which extracts data from a json api and displays it in a table format. </p>
  
  <p>The URL is <a href="https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&amp;service=&amp;date=2018-08-07&amp;location=039026170002" rel="nofollow noreferrer">https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&amp;service=&amp;date=2018-08-07&amp;location=039026170002</a> and I need to pull out the LineRef and ScheduledArrivalTime data. </p>
  
  <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 += "&lt;table border='1'&gt;"
  for (i in myObj.data) {
    x += "&lt;tr&gt;&lt;td&gt;" + myObj.data[i].LineRef + "&lt;/td&gt;" + "&lt;td&gt;" + 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] + "&lt;/td&gt;&lt;/tr&gt;";
  }
  
  x += "&lt;/table&gt;"
  document.getElementById("demo").innerHTML = x;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="demo"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <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</p>