Javascript Loop through array 10 times

Question

I'm not to strong with javascript and am struggling to create a loop through some data passed back from an ajax request.

What I want is for the loop to go through the array ten times and generate a row in a table.

However it doesn't appear to be working. Here is the code in its entirety.

$.getJSON('charts_ajax.php',{a : 'terms'},function(data){
   if(data){
     var tableTop = '<tbody><tr><th width="5%">#</th><th width="65%">Search Terms</th><th width="15%">Visits</th></tr>';

     var si = 1;
     $.each(data, function(index, value) {
         var tableInner = '<tr><td>1</td><td>' + data[si][0]  + '</td><td>307</td></tr>';
         si++;
     });

     var tableBottom = '</tbody></table>';

     $('#terms-table').html(tableTop + tableInner + tableBottom);

   }

});

Nothing is displaying at all. When I console.log(data) I get:

0: [Terms, Visits]
1: [radio fm, 150]
2: [radio fm grimsby, 25]
3: [radio , 10]
4: [radio fm radio, 9]
5: [radio .co.uk, 9]
6: [grimsby rugby club, 8]
7: [radio radio, 7]
8: [radio radio grimsby, 5]
9: [radio , 5]
10: [radio station, 4]

Am I being a complete noob here?

Cheers in advance guys :)

Answer 1

You're reassigning tableInner on each call. Do you mean to do this instead?

var tableInner = '';
$.each(data, function(index, value) {
         tableInner += '<tr><td>1</td><td>' + data[si][0]  + '</td><td>307</td></tr>';
         si++;
});

Assuming your array looks like this:

var data = [
  ["Terms", "Visits"],
["radio fm", 150],
["radio fm grimsby", 25],
["radio ", 10],
["radio fm radio", 9],
["radio .co.uk", 9],
["grimsby rugby club", 8],
["radio radio", 7],
["radio radio grimsby", 5],
["radio ", 5],
 ["radio station", 4]
  ];

Then this:

$.each(data, function(index, value) {
  var part1 = value[0];
  var part2 = value[1];
  console.log(part1 + ' ' + part2);
});

Outputs:

"Terms Visits"
"radio fm 150"
"radio fm grimsby 25"
"radio  10"
"radio fm radio 9"
"radio .co.uk 9"
"grimsby rugby club 8"
"radio radio 7"
"radio radio grimsby 5"
"radio  5"
"radio station 4"

There is an error in how you're iterating over data.

Answer 2

So for anyone looking at this I have solved the problem with a little help and thanks to @remyabel for pointing out that I was re-iterating the tableInner variable and not adding to it.

Here is the solution (FullCode with comments):

/// Create the Request
$.getJSON('charts_ajax.php',{a : 'terms'},function(data){
   // Check that there is data coming back from the request
   if(data){
       //Start the table html
       var tableTop = '<tbody><tr><th width="5%">#</th><th width="65%">Search Terms</th><th width="15%">Visits</th></tr>';
       var tableInner = '';

       //For each of the items in data Create an inner row of the table
       $.each(data, function(index, row) {
          if(index !== 0){
          tableInner += '<tr><td>' + index + '</td><td>' + row[0]  + '</td><td>' + row[1] + '</td></tr>';
          }
       });

      //close the table
      var tableBottom = '</tbody></table>';

     // Find the table by id and insert the html. 
     $('#terms-table').html(tableTop + tableInner + tableBottom);

     }

});