从 json url 获取数据

Question

我需要编写一个 HTML 脚本，从 json api 中提取数据并以表格格式显示。

URL 是https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002，我需要提取 LineRef 和 ScheduledArrivalTime 数据。

目前，我已手动将 URL 中的数据复制并粘贴到脚本标记内的对象中，并像这样提取数据，但无论如何我可以直接从 URL 本身解析数据吗？

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>

我尝试过研究 getJSON 和 fetch() 之类的方法，但我对 JS 比较陌生，所以我不明白如何将它们应用到我的脚本中。脚本中的任何 cmets 对我也很有用

Answer 1

如果在他们的服务器上启用了 CORS，这将起作用。并非如此，您必须添加代理，例如改变

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

到

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

并让 yourproxy.php 获取传递的 url

这段代码会给出

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

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

是的，可以这样做。

我在这里假设您对 URL 使用 GET 方法。

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();

populateTable 是一种用于使用从服务器获取的数据填充表的方法。

data 变量是 JSON 对象的列表，将按原样接收。

[{"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"}, ...]

Answer 3

好的，如果您想使用 fetch api，请使用此文档作为参考：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

通俗地说是：

   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);

要带走的笔记。

通过将 fetch 函数的响应存储到我声明的数据对象中，您现在可以操作该对象

URL 可以替换为您想要的任何 url，或分配正确 url 的逻辑，因为我假设预定的旅程可能需要指向不同的 api url。

我还考虑学习一个库以将其合并到您的项目中，例如 RxJs，以了解如何在 url 上调用“订阅”方法。