嵌套 JSON 到 HTML 表答案

【问题标题】：Nested JSON to HTML table嵌套 JSON 到 HTML 表
【发布时间】：2015-08-17 15:19:05
【问题描述】：

我的代码中可能有一个愚蠢的错误，但我还没有找到答案。我正在使用来自外部站点 http://rata.digitraffic.fi/api/v1/live-trains/[trainnumber] 的 JSON 数据。

我的目标是从 JSON 数组中的数组获取数据到一个简单的 HTML 表，在本例中是来自所有 timeTableRows 数组的 stationShortCode、type、commercialTrack 和 scheduleTime。 JSON 数据如下所示：

    [{"trainNumber":9707,
  "departureDate":"2015-06-03",
  "operatorUICCode":10,
  "operatorShortCode":"vr",
  "trainType":"HL",
  "trainCategory":"Commuter",
  "commuterLineID":"H",
  "runningCurrently":false,
  "cancelled":false,
  "version":4295000475,
  "timeTableRows":[  
      {  
        "stationShortCode":"HKI",
        "stationUICCode":1,
        "countryCode":"FI",
        "type":"DEPARTURE",
        "trainStopping":true,
        "commercialStop":true,
        "commercialTrack":"6",
        "cancelled":false,
        "scheduledTime":"2015-06-03T14:48:00.000Z"
     },
     {  
        "stationShortCode":"PSL",
        "stationUICCode":10,
        "countryCode":"FI",
        "type":"ARRIVAL",
        "trainStopping":true,
        "commercialStop":true,
        "commercialTrack":"3",
        "cancelled":false,
        "scheduledTime":"2015-06-03T14:52:30.000Z"
     }, and 5 to 50 timeTableRows more.

json.php，从$_GET获取列车号，长这样

    <?php
$juna = $_GET["juna"];?>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

</head>
<body>
    <h1><?php
$juna = $_GET["juna"];
echo $juna;?></h1>
<script>
$.ajax({
url: 'http://rata.digitraffic.fi/api/v1/live-trains/<?php echo $juna;?>',
dataType: 'json',
success: function(data) {
    $(row).appendTo('table.data');
    row = '';
    for (var i in data.timeTableRows) {
        row += '<tr id="' + i + '">';
        row += '<td>' + data.timeTableRows[i].stationShortCode + '</td>';
        row += '<td>' + data.timeTableRows[i].commercialTrack + '</td>';
        row += '<td>' + data.timeTableRows[i].scheduledTime + '</td>';
        row += '<td>' + data.timeTableRows[i].type + '</td>';
        row += '</tr>';
    }
    $(row).appendTo('table.data');
},
});
</script><table id="data"></table>
</body>
</html>

我确定存在一些愚蠢的错误，但我自己看不到它们。

【问题讨论】：

你可能想要更新 jQuery 的版本，那是一个非常旧的版本。
当然，这只是第一个复制粘贴。计划在服务器上使用本地版本。
不要复制粘贴这么旧的版本。只需从 jquery 网站下载一个副本。您可能正在尝试使用旧版本中不存在的功能。 v1.5 和 v1.11 之间发生了很多变化。
所以，现在使用本地 jquery-1.11.3.min.

标签： php jquery ajax json multidimensional-array

【解决方案1】：

问题是您试图附加到具有data 类的表中，但您没有。您的表的 id 为 data，请将 $(row).appendTo('table.data'); 更改为 $(row).appendTo('table#data');

【讨论】：

改成table#data，也去掉了上面误放$(row).appendTo('table.data');，但还是不显示table。
在 $(row).appendTo('table#data'); 之前添加 console.log(row) 并检查控制台以查看 HTML 是否在行中。

【解决方案2】：

所以，我从头开始重新编写了整个脚本，稍加改动。 JSON解析脚本现在是

function myFunction(response) {
var obj = JSON.parse(response);
var i;
var out = "<table><tr><td>Juna</td><td>Asema</td><td>Pysähtyy</td><td>Aikataulu</td><td>Raide</td></tr>";

for(j = 0; j < obj.length; j++) {
for(i = 0; i < obj[j].timeTableRows.length; i++) {
out += "<tr><td>" +
obj[j].trainNumber +
"</td><td>" +
obj[j].timeTableRows[i].stationShortCode +
"</td><td>" +
obj[j].timeTableRows[i].commercialStop +
"</td><td>" +
obj[j].timeTableRows[i].scheduledTime +
"</td></tr>";
}
}
out += "</table>"
document.getElementById("id01").innerHTML = out;
}

我还添加了第一个 trainNumber 列用于测试目的。

【讨论】：