Javascript 从json url获取数据

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

URL是，我需要提取LineRef和ScheduledArrivalTime数据

目前，我已经手动将URL中的数据复制并粘贴到脚本标记中的一个对象中，并像这样提取了数据，但是我是否可以直接从URL本身解析数据

var myObj，i，x=“”；
myObj={
“数据”：[{
“站点”：“RTL”，
“操作员”：“RGB”，
“LineRef”：“53a”，
“仓库代码”：“RGB”，
“位置代码”：“039026170002”，
“地点名称”：“长水大道300号”，
“ScheduledStartTime”：“2018-08-07 05:12:00”，
“LiveJourneyId”：“0”，
“顺序”：“10”，
“运行板”：“50A”，
“职责”：“1601”，
“方向”：“出站”，
“日志代码”：“1”，
“车辆代码”：“，
“驱动器代码”：“，
“计时点”：“计时点”，
“JourneyPattern”：“JP649”，
“到达状态”：“，
“离职状态”：“离职状态”，
“日程安排时间”：“2018-08-07 05:29:00”
}, {
“站点”：“RTL”，
“操作员”：“RGB”，
“LineRef”：“53”，
“仓库代码”：“RGB”，
“位置代码”：“039026170002”，
“地点名称”：“长水大道300号”，
“ScheduledStartTime”：“2018-08-07 05:35:00”，
“LiveJourneyId”：“0”，
“顺序”：“6”，
“RunningBoard”：“50B”，
“职责”：“1602”，
“方向”：“出站”，
“行程代码”：“3”，
“车辆代码”：“，
“驱动器代码”：“，
“计时点”：“计时点”，
“JourneyPattern”：“JP625”，
“到达状态”：“，
“离职状态”：“离职状态”，
“日程安排时间”：“2018-08-07 05:49:00”
}, {
“站点”：“RTL”，
“操作员”：“RGB”，
“LineRef”：“53a”，
“仓库代码”：“RGB”，
“位置代码”：“039026170002”，
“地点名称”：“长水大道300号”，
“ScheduledStartTime”：“2018-08-07 05:55:00”，
“LiveJourneyId”：“0”，
“顺序”：“10”，
“运行板”：“50A”，
“职责”：“1601”，
“方向”：“出站”，
“日志代码”：“7”，
“车辆代码”：“，
“驱动器代码”：“，
“计时点”：“计时点”，
“JourneyPattern”：“JP649”，
“到达状态”：“，
“离职状态”：“离职状态”，
“日程安排时间”：“2018-08-07 06:13:00”
}, {
“站点”：“RTL”，
“操作员”：“RGB”，
“LineRef”：“52a”，
“仓库代码”：“RGB”，
“位置代码”：“039026170002”，
“地点名称”：“长水大道300号”，
“ScheduledStartTime”：“2018-08-07 05:57:00”，
“LiveJourneyId”：“0”，
“顺序”：“2”，
“RunningBoard”：“50B”，
“职责”：“1602”，
“方向”：“入站”，
“日志代码”：“2”，
“车辆代码”：“，
“驱动器代码”：“，
“计时点”：“计时点”，
“JourneyPattern”：“JP606”，
“到达状态”：“，
“离职状态”：“离职状态”，
“日程安排时间”：“2018-08-07 06:00:00”
}]
}
x+=“”
用于（myObj.data中的i）{
x++++myObj.data[i].LineRef+++++myObj.data[i].调度时间[11]+myObj.data[i].调度时间[12]+myObj.data[i].调度时间[13]+myObj.data[i].调度时间[14]+myObj.data[i].调度时间[15]+；
}
x+=“”
document.getElementById（“demo”）.innerHTML=x
如果在服务器上启用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”标头。因此，不允许访问源“null”


$.getJSON（“https://rtl2.ods-live.co.uk/api/scheduledJourneys?key=sQ3o5bYbz1&service=&date=2018-08-07&location=039026170002.json“，函数（myObj）{
var x=“”
for（myObj.data中的变量o）{
x++++myObj.data[i].LineRef+++++++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]+；
}
x+=“”
$（“#demo”）.html（x）；
})

是的，这是可能的

我在这里假设您对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是一种使用从服务器获取的数据填充表的方法

数据变量是JSON对象的列表，它将作为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"}, ...]

好的，如果您想使用fetch api，请使用以下文档作为参考：

从外行的角度来看，它是如何工作的：

   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上的“订阅”方法。如果您需要使用
fetch
或
getJSON
获得帮助，最好在其他地方查找教程。您提到的API不支持CORS，因此您必须在自己的服务器上使用代理
请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问源站“null”。
请求的资源上不存在“访问控制允许源站”标头。因此，不允许访问源站“null”。