Question

我不会强调javascript，并且正在努力通过从ajax请求传回的一些数据创建一个循环。

我想要的是循环遍历数组十次并在表格中生成一行。

然而它似乎没有起作用。这是完整的代码。

$.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);

   }

});

根本没有任何显示。当我得到console.log（数据）时，我得到了：

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]

我在这里是一个完整的菜鸟吗？

提前干杯：）

Answer 1

您在每次通话时重新分配tableInner。你的意思是这样做吗？

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

假设你的数组看起来像这样：

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

然后这个：

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

输出：

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

如何迭代数据时出错。

Answer 2

所以对于任何看过这个问题的人，我已经解决了这个问题并提供了一些帮助，感谢@remyabel指出我正在重新迭代tableInner变量而不是添加它。

这是解决方案（带注释的FullCode）：

/// 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);

     }

});

Javascript循环数组10次

2 个答案: