Php 嵌套JSON到HTML表_Php_Jquery_Ajax_Json_Multidimensional Array

Php 嵌套JSON到HTML表

php jquery ajax json

Php 嵌套JSON到HTML表,php,jquery,ajax,json,multidimensional-array,Php,Jquery,Ajax,Json,Multidimensional Array,我的代码中可能有一个愚蠢的错误，但我还没有找到答案。我使用的是来自外部站点的JSON数据我的目标是从JSON数组中的数组获取数据到一个简单的HTML表，在本例中，stationShortCode、type、commercialTrack和scheduledTime来自所有timeTableRows-数组。JSON数据如下所示： [{"trainNumber":9707, "departureDate":"2015-06-03", "operatorUICCode":10,

我的代码中可能有一个愚蠢的错误，但我还没有找到答案。我使用的是来自外部站点的JSON数据

我的目标是从JSON数组中的数组获取数据到一个简单的HTML表，在本例中，stationShortCode、type、commercialTrack和scheduledTime来自所有timeTableRows-数组。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从$\u 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>


$.ajax({
网址：'http://rata.digitraffic.fi/api/v1/live-trains/',
数据类型：“json”，
成功：功能（数据）{
$（行）.appendTo（'table.data'）；
行=“”；
for（data.timeTableRows中的var i）{
行+=''；
行+=''+数据。timeTableRows[i]。stationShortCode+''；
行+=''+数据。timeTableRows[i]。commercialTrack+''；
行+=''+数据。timeTableRows[i]。scheduledTime+''；
行+=''+数据。timeTableRows[i]。类型+''；
行+=''；
}
$（行）.appendTo（'table.data'）；
},
});

我肯定有一些愚蠢的错误，但我自己就是看不到。

问题是您试图用一类

数据添加到一个表中，但您没有。您的表的id为data
，change$（行）。appendTo（'table.data'）到<代码>$（行）.appendTo（'table#data'）所以，我从头开始重新编写了整个脚本，稍微有点扭曲。
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;
}

函数myFunction（响应）{
var obj=JSON.parse（响应）；
var i；
var out=“JunaAsemaPysähtyyAikatauluRaide”；
对于（j=0；j

为了测试的目的，我还添加了第一列trainNumber。
您可能需要更新jQuery的版本，这是一个非常旧的版本。当然，这只是第一个复制粘贴的版本。计划在服务器上使用本地版本。不要复制粘贴这样的旧版本。只需从jquery网站下载一份副本。您可能正在尝试使用旧版本中不存在的功能。在v1.5和v1.11之间发生了很多变化。因此，现在使用本地jquery-1.11.3.min。更改为table#data，并且还删除了错误地放入$（行）的上限。appendTo（'table.data'）
，但仍不显示表。在$（行）前面添加console.log（行）
。appendTo（'table#data'）
并检查控制台以查看HTML是否在第行中。