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 linux驱动，linux应用，多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器，如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助