我需要编写一个HTML脚本，该脚本从json api中提取数据并以表格格式显示。
URL为https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002，我需要提取LineRef和ScheduledArrivalTime数据。
此刻，我已经将URL中的数据手动复制并粘贴到script标签内的对象中，并像这样提取数据，但是无论如何，我可以直接从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还是比较陌生，所以我不明白如何将它们应用于我的脚本。脚本中的任何注释对我也将有用
答案 0 :(得分：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获取传递的网址
此代码将给出
所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问原始“空”。
$.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>
答案 1 :(得分：0)
是的，可以这样做。
我在这里假设您对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"}, ...]
答案 2 :(得分：0)
好的，如果您想使用访存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这样的库来将其合并到您的项目中，以了解如何在网址上调用“订阅”方法。