Вложенная таблица JSON в HTML

В моем коде может быть идиотская ошибка, но я пока еще не нашел ответа. Я использую данные JSON от http://rata.digitraffic.fi/api/v1/live-trains/[trainnumber], который является внешним сайтом.Вложенная таблица JSON в HTML

Моя цель - получить данные из массива внутри массива JSON в простой HTML-таблице, в данном случае stationShortCode, type, commercialTrack и scheduleTime из всех timeTableRows -arrays. данные в формате 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>

я уверен, что есть/есть некоторые идиотские ошибки (s), но я просто не вижу их сам.

источник

2015-06-03 Tuomas Savela

Возможно, вы захотите обновить версию jQuery, это действительно старая версия. – Styphon

Конечно, это был только первый экземпляр пасты. Планирование использования локальной версии на сервере. –

Не копируйте пасту в такую старую версию. Просто скачайте копию с веб-сайта jquery. Возможно, вы пытаетесь использовать функции, которые не существуют в этой старой версии. Много изменилось между v1.5 и v1.11. – Styphon

Итак, я написал весь скрипт с нуля, с небольшим завихрением. 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 для целей тестирования.

источник

2015-06-04 09:52:14

Проблема заключается в том, что вы пытаетесь добавить к таблице с классом data, но у вас ее нет. Ваш стол имеет идентификатор data, смените $(row).appendTo('table.data'); на $(row).appendTo('table#data');

источник

2015-06-03 12:11:10 Styphon

Изменил данные таблицы #, а также удалил верхний ошибочно положил '$ (строка) .appendTo ('table.data');', но все еще не показывал таблицу. –

Добавить в 'console.log (строка)' непосредственно перед '$ (строка) .appendTo ('table # data');' и проверить консоль, чтобы увидеть, находится ли HTML в строке. – Styphon

Вложенная таблица JSON в HTML

ответ

Смежные вопросы