javascript - 在 Javascript 中从 JSON 创建一个数组

Question

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

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

更新:好的，我已经使用了下面提供的 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

我认为您可以编写一个单独的函数来构建表，如下所示:

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