从 json url 获取数据
Getting data from json url
我需要编写一个 HTML 脚本，从 json api 中提取数据并以 table 格式显示。
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 比较陌生，所以我不明白如何将它们应用到我的脚本中。脚本中的任何评论对我也很有用
如果在他们的服务器上启用了 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
此代码将给出
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>
是的，可以这样做。
我在这里假设您对 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 是一种用于使用从服务器获取的数据填充 Table 的方法。
数据变量是 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"}, ...]
好的，如果您想使用提取 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，以了解如何在 urls 上调用 "subscribe" 方法。
我需要编写一个 HTML 脚本，从 json api 中提取数据并以 table 格式显示。
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 比较陌生，所以我不明白如何将它们应用到我的脚本中。脚本中的任何评论对我也很有用
如果在他们的服务器上启用了 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
此代码将给出
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>
是的，可以这样做。
我在这里假设您对 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 是一种用于使用从服务器获取的数据填充 Table 的方法。
数据变量是 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"}, ...]
好的，如果您想使用提取 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，以了解如何在 urls 上调用 "subscribe" 方法。