html - 将 TFL json 解析为 HTML
问题描述
总新手 我正在尝试构建一个简单的网页,该网页将显示本地巴士到达,但不确定从哪里开始处理数据并输出到表格
API URL 是https://api.tfl.gov.uk/StopPoint/490004220V/Arrivals
样本数据
[{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"-1261281243","operationType":1,"vehicleId":"YY64YKN","naptanId":"490004220V","stationName":"Hancock Road","lineId":"488","lineName":"488","platformName":"V","direction":"outbound","bearing":"182","destinationNaptanId":"","destinationName":"Dalston Junction","timestamp":"2020-03-01T20:13:39.3280692Z","timeToStation":1571,"currentLocation":"","towards":"Hackney Wick or Canary Wharf","expectedArrival":"2020-03-01T20:39:50Z","timeToLive":"2020-03-01T20:40:20Z","modeName":"bus","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:09.1238643","source":"2020-03-01T13:18:33.544Z","insert":"2020-03-01T20:14:11.716Z","read":"2020-03-01T20:14:21.259Z","sent":"2020-03-01T20:13:39Z","received":"0001-01-01T00:00:00Z"}},{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"-728950935","operationType":1,"vehicleId":"YY64YKR","naptanId":"490004220V","stationName":"Hancock Road","lineId":"488","lineName":"488","platformName":"V","direction":"outbound","bearing":"182","destinationNaptanId":"","destinationName":"Dalston Junction","timestamp":"2020-03-01T20:13:39.3280692Z","timeToStation":361,"currentLocation":"","towards":"Hackney Wick or Canary Wharf","expectedArrival":"2020-03-01T20:19:40Z","timeToLive":"2020-03-01T20:20:10Z","modeName":"bus","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:09.5396016","source":"2020-03-01T13:18:33.544Z","insert":"2020-03-01T20:13:41.971Z","read":"2020-03-01T20:13:51.212Z","sent":"2020-03-01T20:13:39Z","received":"0001-01-01T00:00:00Z"}},{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"-792585798","operationType":1,"vehicleId":"BJ11DVT","naptanId":"490004220V","stationName":"Hancock Road","lineId":"d8","lineName":"D8","platformName":"V","direction":"outbound","bearing":"182","destinationNaptanId":"","destinationName":"Crossharbour","timestamp":"2020-03-01T20:13:39.3280692Z","timeToStation":608,"currentLocation":"","towards":"Hackney Wick or Canary Wharf","expectedArrival":"2020-03-01T20:23:47Z","timeToLive":"2020-03-01T20:24:17Z","modeName":"bus","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:09.5404134","source":"2020-03-01T13:18:33.544Z","insert":"2020-03-01T20:13:11.678Z","read":"2020-03-01T20:13:21.166Z","sent":"2020-03-01T20:13:39Z","received":"0001-01-01T00:00:00Z"}},{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"-1867782093","operationType":1,"vehicleId":"BJ11EBL","naptanId":"490004220V","stationName":"Hancock Road","lineId":"d8","lineName":"D8","platformName":"V","direction":"outbound","bearing":"182","destinationNaptanId":"","destinationName":"Crossharbour","timestamp":"2020-03-01T20:13:39.3280692Z","timeToStation":1785,"currentLocation":"","towards":"Hackney Wick or Canary Wharf","expectedArrival":"2020-03-01T20:43:24Z","timeToLive":"2020-03-01T20:43:54Z","modeName":"bus","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:09.5425500","source":"2020-03-01T13:18:33.544Z","insert":"2020-03-01T20:13:56.576Z","read":"2020-03-01T20:14:06.212Z","sent":"2020-03-01T20:13:39Z","received":"0001-01-01T00:00:00Z"}}]
我正在寻找的输出是lineName destinationName expectedArrival vehicleId
提前致谢
格伦
解决方案
我认为,您可以使用 fetch api 并将结果解析为对象。然后可以像下面这样调用:
好的。我添加了附加表行功能。如果您想改进它,请查看在w3schools 上插入表格行
<html>
<head>
<title>Test Title</title>
</head>
<body>
<table style="width:100%; text-align:center;" id="myTable">
<tr>
<th>Route Number</th>
<th>Destination</th>
<th>Arrival</th>
<th>Vehicle ID</th>
</tr>
</table>
<script>
async function load() {
let url = 'https://api.tfl.gov.uk/StopPoint/490004220V/Arrivals';
let obj = await (await fetch(url)).json();
let table = document.getElementById("myTable");
obj.sort((a, b)=> {
a = new Date(a.expectedArrival);
b =new Date(b.expectedArrival);
return a<b ? -1 : a>b ? 1 : 0;
});
obj.forEach(o=>{
let row = table.insertRow(-1); //
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
cell1.innerHTML = o.lineName;
cell2.innerHTML = o.destinationName;
cell3.innerHTML =o.expectedArrival
cell4.innerHTML = o.vehicleId;
});
}
load();
</script>
</body>
</html>
推荐阅读
- go - golang生成的WebAssembly上的Websockets?
- android - 为什么我们需要 Intent 类中的方法“putIntegerArrayListExtra”
- elasticsearch - 更像这个查询没有被序列化 - NEST
- java - 通过百里香片段共享数据
- java - 为什么这个 @ComponentScan 在我的 Spring Boot 应用程序中不起作用?
- javascript - 如何通过 JavaScript API 匿名访问(无需登录)公开共享的 OneDrive 文件夹?
- javascript - 在 jsx 中进行计算
- github - GitHub 个人访问令牌是否一次性使用(然后它们过期/删除)?
- rpa - 我在安装 UI 路径时遇到问题?
- r - ggplot 将变量添加到图例而不包括在图中(使用 alpha 时)