douyiqi9640 2015-06-03 12:07
浏览 147
已采纳

嵌套的JSON到HTML表

There might be an idiotic mistake in my code, but I just haven't found the answer yet. I'm using JSON data from http://rata.digitraffic.fi/api/v1/live-trains/[trainnumber] which is an external site.

My objective is to get data from array inside JSON array to a simple HTML table, in this case stationShortCode, type, commercialTrack and scheduledTime from all timeTableRows -arrays. JSON data looks like this:

    [{"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, which gets the train number from $_GET, looks like this

    <?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>

I'm sure that there is/are some idiotic mistake(s), but I just can't see them myself.

  • 写回答

2条回答 默认 最新

  • 普通网友 2015-06-04 09:52
    关注

    So, i wrote the whole script again from the scratch, with a little twist. JSON parse script is now

    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;
}

    And I also added the first trainNumber column for testing purposes.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥200 关于#c++#的问题，请各位专家解答！网站的邀请码
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号