在 Javascript 中从 JSON 创建一个数组

Question

我在这里进行了很多研究，但似乎找不到适合我的东西。我所拥有的是一个应用程序，我试图出去并返回一个公共汽车站的下四个公共汽车到达时间。我正在联系一个在 JSON 文件中返回此数据的 API。我遇到的问题是我可以看到我的请求通过提琴手发出，但我似乎无法将数据放入数组中。下面是我现在正在处理的代码。我正在尝试将返回的数据转换为您可以看到我失败的表格格式。

最终，我希望在用户单击“显示我接下来的 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：

<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>

更新：好的，我使用了下面提供的 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 数组。如果您只想将 get 对象属性更改为数组以便可以对其进行迭代，则可以使用一维数组来实现，您不需要将所有其他行保存在二维数组中。我已将 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 循环的每次迭代中，构造一个 tr 元素，插入 tds，最后将整个东西放入 DOM。