将 TFL json 解析为 HTML答案

【问题标题】：Parsing TFL json to HTML将 TFL json 解析为 HTML
【发布时间】：2020-06-14 04:32:24
【问题描述】：

总新手我正在尝试构建一个简单的网页，该网页将显示本地巴士到达，但不确定从哪里开始处理数据并输出到表格

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

提前致谢

格伦

【问题讨论】：

标签： html json api

【解决方案1】：

我认为，您可以使用 fetch api 并将结果解析为对象。然后可以像下面这样调用：

Javascript Fetch Api

好的。我添加了附加表行功能。如果您想改进它，请查看inserting table row on 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>

【讨论】：

感谢我在这里运行代码时的那部分，它可以工作，但我如何让它显示在网页上
这是一个大问题 :) 你创建了任何项目吗？
好的。您可以在 html 文件脚本部分使用我的示例。但是你需要编辑它。因为它不会生成一个 html 表格。
我不得不将我所拥有的答案放入答案中，因为它的长度超过 300
最后两个帮助我如何按 o.expectedArrival 排序并将日期格式化为纯 24 小时制