douyiqi9640
douyiqi9640
2015-06-03 12:07

嵌套的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条回答

  • du718589 du718589 6年前

    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.

    点赞 评论 复制链接分享
  • duanjingwei7239 duanjingwei7239 6年前

    The problem is you're trying to append to a table with a class of data, but you don't have one. Your table has an id of data, change $(row).appendTo('table.data'); to $(row).appendTo('table#data');

    点赞 评论 复制链接分享