在jQuery中將循環與.each（）結合使用

Question

我試圖在發送查詢時在表中顯示json數據。該請求工作正常，一切都很好地顯示。但是： jquery拋出一個TypeError：當我嘗試顯示內容時未定義a。

第一次加載頁面時內容正確顯示，但當通過表單發送另一個請求時拒絕更新。我只是想在HTML中的錶行追加到一個表：

<table id="table"></table> 

的JS是這樣的：

  for (var id = 0; id < 150; id++) { 
       showItems(id); 
      } 

      function showItems(){ 
       $.each(json.list.item[id], function(i, val) { 
        var $r = $('<tr>'); 
        var $c = $('<td>').text(i).appendTo($r); 
        $c = $('<td>').text(val).appendTo($r); 
        $("#table").append($r); 
       }); 
      } 

我敢肯定它有事情做與傳遞的ID for循環到每個函數，但我不知道如何解決這個問題。由於JS在for循環中沒有塊範圍，所以在$ .each（）中可以訪問id變量？ 但我不能解決爲什麼jQuery會拋出「a未定義」的錯誤，並且腳本不會反應，直到頁面重新加載。我認爲它可能是一個未定義的變量返回NULL，但我不知道哪個。

在這裏和網上閱讀噸的答案找不到解決方案（也關於JS變量範圍和閉包）。

http://jshint.com/不顯示任何未定義的變量，除了jquery $ S。

幫助是極大的讚賞:)

編輯： 的_id修復沒有幫助。這是整個js代碼。

$(document).ready(function(){ 


$("#term").focus(function() { 

    var full = $("#table > tbody > tr").length? true : false; 
    if(full == false) { 
     $("#message").empty(); 
     $("#table").empty(); 
    } 
}); 

var getFood = function(){ 

    var food = $('#term').val(); 

    if(food ==''){ 

     $('#message').html("Ha! We haven't seen you type, so no request! Type something!<hr>"); 
    } else { 

     $('#message').html("Your information is on its way!<hr>"); 

     $.getJSON("APICALL", function(json){ 
      console.log(json); 

      for (var id = 0; id < 150; id++) { 
       showItems(id); 
      } 

      function showItems(){ 

       $.each(json.list.item[id], function(i, val) { 
        var $r = $('<tr>'); 
        var $c = $('<td>').text(i).appendTo($r); 
        $c = $('<td>').text(val).appendTo($r); 
        $("#table").append($r); 
       }); 
      } 

     }); 
    } 
}; 

$('#search').click(getFood); 
}); 

當我離開了for循環，而是隻需使用：

   $.each(json.list.item[0], function(i, val) { 
        var $r = $('<tr>'); 
        var $c = $('<td>').text(i).appendTo($r); 
        $c = $('<td>').text(val).appendTo($r); 
        $("#table").append($r); 
       }); 

僅顯示的第一個對象，它工作正常，並不會引發錯誤。這讓我認爲它與for/.each（）連接有關。

EDIT2：解決方案

應用於下面的表格由@ MM-TAC提出的代碼和完美的作品：

 $.each(json.list.item, function (key, data) { 
      console.log(key) 
      $.each(data, function(index, data) { 
       var $r = $('<tr>'); 
       var $c = $('<td>').text(index).appendTo($r); 
       $c = $('<td>').text(data).appendTo($r); 
       $("#table").append($r); 
      }); 
     }); 

Answer 1

您需要使用不同的$.each每個對象是這樣的：

$.each(json, function (key, data) { 
    console.log(key) 
    $.each(data, function (index, data) { 
     console.log('index', data) 
    }) 
}) 

Answer 2

你有什麼投入？目前，您正在將'id'傳遞給函數'showItems'（它實際上沒有輸入參數）。

通過你的代碼，你有一個for循環調用你的函數150次，每次都有一個不同的索引。但這本身就是每個人的目的。 json.list.item是如何構建的？如果它是嵌套的，並且你正在循環一個數組數組，這可能會起作用（儘管它的寫法起初有點不清楚）。

此外，您不需要將任何內容分配給$ c，因爲這些命令正在立即執行附加操作。

如果您對我的輸入有所瞭解，我可能會幫助您更多。

Answer 3

 for (var id = 0; id < 150; id++) { 
      showItems(id); 
     } 

     function showItems(id){ 
      $.each(json.list.item[id], function(i, val) { 
       var $r = $('<tr>'); 
       var $c = $('<td>').text(i).appendTo($r); 
       $c = $('<td>').text(val).appendTo($r); 
       $("#table").append($r); 
      }); 
     } 

如果添加function showItems(id)而不是function showItems()您each()實際上有話要對循環。

Answer 4

修正了這個代碼的問題：

  $.each(json.list.item, function (key, data) { 
       console.log(key) 
       $.each(data, function(index, data) { 
        var $r = $('<tr>'); 
        var $c = $('<td>').text(index).appendTo($r); 
        $c = $('<td>').text(data).appendTo($r); 
        $("#table").append($r); 
       }); 
      }); 

感謝大家幫助我。不勝感激。 Stackoverflow社區真的很棒。