title: Create an array from JSON in Javascript
body: <p>I've researched quite a bit on here and I can't seem to find something that will work for me.  What I have is an application that I'm trying to have go out and return the next four bus arrival times for a bus stop.  I am reaching out to an API that returns this data in a JSON file.  The problem I am having is I can see my request go out via fiddler but I can't seem to get the data into an array.  Below is the code that I'm dealing with right now.  I'm trying to get the returned data into a table format which you can see I'm failing at. </p>
  
  <p>Eventually I want to get a popup to appear when the user clicks on the Show me the next 4 bus arrival times but this was for testing purposes.  I would love to have the users click on my button which calls this function and then something like a like table open with these values.  If you can help with that within this code I would appreciate it as well.  </p>
  
  <p>JSON Data:</p>
  
  <pre><code>[{"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"}]
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;script&gt;
  function getTimes(stopNumber) {
          var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber ";
          $.getJSON(busArrivalAPI, function(busArrivals) {
              var a = [];
              for (var i = 0; i &lt; busArrivals.length; i++) {
                  a[i] = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR];
                  document.getElementById("results").createElement("TR");
                  for (var b = 0; b &lt; 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);
                  };
              };
          });     
  &lt;/script&gt;
  </code></pre>
  
  <p>My DIV:</p>
  
  <pre><code>&lt;div style="overflow-x:scroll; overflow-y:scroll;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Bus Arrival Times', selected:true"&gt;
    &lt;table id = 'results'&gt;
      &lt;tr&gt;
        &lt;th&gt;Route&lt;/th&gt;
        &lt;th&gt;Arrival Time&lt;/th&gt;
        &lt;th&gt;Direction&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE:  Ok, I've use the makeTable idea provide below and it works when I program as seen below hard coding the json data.  However, when trying to use the $.getJSON I'm having some cross domain issues now and don't know how I can get my $.getJSON request working.  Any input on how to get the data from my getJSON request work be great.  </p>
  
  <pre><code>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&gt;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);
    };
  </code></pre>