Создайте массив из JSON в Javascript

Question

Я изучил довольно много здесь, и я не могу найти что-то, что сработает для меня. То, что у меня есть, - это приложение, которое я пытаюсь выходить и возвращать следующие четыре времени прибытия автобуса для остановки автобуса. Я обращаюсь к API, который возвращает эти данные в файле JSON. Проблема, с которой я сталкиваюсь, - это то, что я могу видеть, что мой запрос выходит через скрипача, но я не могу получить данные в массив. Ниже приведен код, с которым я имею дело прямо сейчас. Я пытаюсь получить возвращенные данные в формат таблицы, который вы можете видеть, я не могу.

В конце концов я хочу, чтобы всплывающее окно появлялось, когда пользователь нажимает на «Показывать мне следующее время прибытия 4-х автобусов», но это было для целей тестирования. Я хотел бы, чтобы пользователи нажимали на мою кнопку, которая вызывает эту функцию, а затем что-то вроде таблицы, открытой с этими значениями. Если вы можете помочь с этим в этом коде, я был бы признателен.

JSON данных:

[{"ARRIVAL":"01:23P","ROUTE":"208","DIR":"E"}, 
{"ARRIVAL":"01:53P","ROUTE":"208","DIR":"E"}, 
{"ARRIVAL":"02:23P","ROUTE":"208","DIR":"E"}, 
{"ARRIVAL":"02:53P","ROUTE":"208","DIR":"E"}] 

Код:

<script> 
function getTimes(stopNumber) { 
     var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber "; 
     $.getJSON(busArrivalAPI, function(busArrivals) { 
      var a = []; 
      for (var i = 0; i < busArrivals.length; i++) { 
       a[i] = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR]; 
       document.getElementById("results").createElement("TR"); 
       for (var b = 0; b < 3; b++) { 
        var x = document.createElement("TH"); 
        var z = a[i][b]; 
        var t = document.createTextNode(z); 
        x.appendChild(t); 
        document.getElementById('results').appendChild(x); 
       }; 
      }; 
     });  
</script> 

Мой ДИВ:

<div style="overflow-x:scroll; overflow-y:scroll;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Bus Arrival Times', selected:true"> 
    <table id = 'results'> 
    <tr> 
     <th>Route</th> 
     <th>Arrival Time</th> 
     <th>Direction</th> 
    </tr> 
    </table> 
</div> 

UPDATE: Хорошо, Я использовать makeTable идея представить ниже, и она работает, когда Я программирую, как показано ниже, жесткое кодирование json-данных. Однако при попытке использовать $ .getJSON у меня сейчас возникают проблемы с перекрестным доменом и я не знаю, как я могу получить запрос на $ .getJSON. Любые данные о том, как получить данные из моего запроса getJSON, будут отличными.

function getTimes(stopNumber) { 

    // This is the API address I need to hit. Trying to figure out how to incorporate that and remove the function getJSON where I have the data hard coded. 
    //var busArrivalAPI = "http://-----/rtcTimes/"+ stopNumber + "?jsoncallback=?";  

    function makeTable(busArrivals) { 
    // This will remove old values so table will only load current Times 
     var results = document.getElementById("results"); 
     var rowCount = results.rows.length; 
     for (var x=rowCount-1; x>0; x--) { 
     results.deleteRow(x); 
     } 
     // This will populate the result table with the correct bus routes/times/direction 
     busArrivals.forEach(function(busArrival) { 
     var tr = document.createElement('tr'); 
     var route = document.createElement('td'); 
     route.appendChild(document.createTextNode(busArrival.ROUTE)); 
     var arrival = document.createElement('td'); 
     arrival.appendChild(document.createTextNode(busArrival.ARRIVAL)); 
     var direction = document.createElement('td'); 
     direction.appendChild(document.createTextNode(busArrival.DIR)); 
     tr.appendChild(route); 
     tr.appendChild(arrival); 
     tr.appendChild(direction); 
     document.getElementById('results').appendChild(tr); 
     }); 
    } 

    function getJSON(callback) { 
     var data = [{"ARRIVAL":"05:23P","ROUTE":"201","DIR":"E"}, 
     {"ARRIVAL":"05:54P","ROUTE":"202","DIR":"E"}, 
     {"ARRIVAL":"06:33P","ROUTE":"203","DIR":"E"}, 
     {"ARRIVAL":"07:11P","ROUTE":"204","DIR":"E"}]; 
     callback(data); 
    } 

    getJSON(makeTable); 
    }; 

Answer 1

Вы создаете TR элемент, но не добавляя его к столу. Вместо этого вы добавляете элементы TH непосредственно в таблицу, что является недопустимым.

function getTimes(stopNumber) { 
    var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber; 
    $.getJSON(busArrivalAPI, function(busArrivals) { 
     var table = document.getElementById('results'); 
     for (var i = 0; i < busArrivals.length; i++) { 
      var a = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR]; 
      var row = document.createElement("TR"); 
      for (var b = 0; b < 3; b++) { 
       var x = document.createElement("TH"); 
       var z = a[b]; 
       var t = document.createTextNode(z); 
       x.appendChild(t); 
       row.appendChild(x); 
      }; 
      table.appendChild(row); 
     }; 
    }); 
} 

Я не знаю, почему вам нужен a массив. Если вы просто хотите изменить свойства объекта в массив, чтобы вы могли перебирать его, вы можете сделать это с помощью 1-мерного массива, вам не нужно сохранять все остальные строки в двумерном массиве. Я изменил a на один массив.

Answer 2

Я думаю, вы могли бы написать отдельную функцию, чтобы построить таблицу, как это:

function makeTable(busArrivals) { 
    busArrivals.forEach(function(busArrival) { 
     var tr = document.createElement('tr'); 
     var route = document.createElement('td'); 
     route.appendChild(document.createTextNode(busArrival.ROUTE)); 
     var arrival = document.createElement('td'); 
     arrival.appendChild(document.createTextNode(busArrival.ARRIVAL)); 
     var direction = document.createElement('td'); 
     direction.appendChild(document.createTextNode(busArrival.DIR)); 
     tr.appendChild(route); 
     tr.appendChild(arrival); 
     tr.appendChild(direction); 
     document.getElementById('results').appendChild(tr); 
    }); 
} 

var busArrivalAPI = 'http://blahblahblah/rtcTimes/'+ stopNumber; 
$.getJSON(busArrivalAPI, makeTable); 

В каждой итерации цикла ForEach, вы строите тр элемент, вставить ТДС и, наконец, положить все это внутри DOM.