值不會推到數組

Question

在下面的代碼中，我將這個值分配給來自JSON的變量，這個var tag = data[j]['text'];和我輸出它與這console.log(tag);（用於測試）哪個起作用。

我嘗試將值推入與tags.push(tag);數組，但它不會工作！

爲什麼這些值不會進入數組？我只是想將tag的內容放入數組中...

function GetAvailableTags() { 
      var url = '/TextCodes/TextCodes?key='; 
      var tagGroups = []; 
      $('.ui-autocomplete-input').each(function() { 
       var key = $(this).attr('id'); 
       var tags = []; 
       //console.log(key); 
       $.getJSON(url + key, function (data) { 
        for (var j = 0, len = data.length; j < len; j++) { 
         var tag = data[j]['text']; 
         console.log(tag); 
         tags.push(tag); 
        } 
       }); 
       console.log(tags.length); 
       for (var k = 0, len = tags.length; k < len; k++) { 
        console.log(tags[k]); 
       } 
      }); 
     } 

感謝您的幫助。

Answer 1

我的解決方案是有點漫長而愚蠢的，但它的工作原理。現在，我可以像數組textCodes['taxes']那樣訪問變量。 sdespont的async說明也有幫助。

var textCodes = GenerateTextCodes(); 
    console.log(textCodes); 

    function GenerateTextCodes() { 
     var arr = []; 
     $('.ui-autocomplete-input').each(function() { 
      var id = $(this).attr('id'); 
      arr[id] = GetAvailableTags(id); 
     }); 
     //console.log(arr['taxes']); 
     return arr; 
    } 

    // get all autocomplete element IDs and put them into an array 
    function GetAvailableTags(key) { 
     var url = '/TextCodes/TextCodes?key='; 
     var tags = []; 
     $.ajax({ 
      url: url + key, 
      type: 'GET', 
      async: false, 
      success: function (data) { 
       //console.log(data[0].text); 
       //console.log(data.length); 
       for (var i = 0; i < data.length; i++) { 
        //console.log(data[i].text); 
        tags.push(data[i].text); 
       } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert('an error occurred!'); 
      } 
     }); 
     //console.log(tags); 
     return tags; 
    } 

Answer 2

因爲$.getJSON是一個異步函數。這意味着你的代碼

console.log(tags.length); 
for (var k = 0, len = tags.length; k < len; k++) { 
    console.log(tags[k]); 
} 

將$.getJSON回調函數之前執行：

function() { 
    var key = $(this).attr('id'); 
    var tags = []; 
    //console.log(key); 
    $.getJSON(url + key, function (data) { 
     for (var j = 0, len = data.length; j < len; j++) { 
      var tag = data[j]['text']; 
      console.log(tag); 
      tags.push(tag); 
     } 
    } 

這就是爲什麼你的變量似乎是空的，當看到在你的代碼之上，但它是如何可能在回調函數中使用console.log(tag);打印數據。

更新

下面是使用而不是$ .getJSON $就方法來指定使用參數asynch : false

通過這種方式，數據必須同步檢索，服務器調用的例子響應（成功回調）是強制性的以繼續進程。這種非標準方式的缺點是您的網頁可能會凍結，等待服務器響應。這並不是最好的方法，但有時它是有用的。

function GetAvailableTags() { 
    var url = '/TextCodes/TextCodes?key='; 
    var tagGroups = []; 
    $('.ui-autocomplete-input').each(function() { 
     var key = $(this).attr('id'); 
     var tags = []; 
     //console.log(key); 
     $.ajax({ 
      url: url + key, 
      type: 'POST', 
      asynch: false,//specify to stop JS execution waiting the server response 
      success: function (data) { 
       for (var j = 0, len = data.length; j < len; j++) { 
        var tag = data[j]['text']; 
        console.log(tag); 
        tags.push(tag); 
       } 
      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
       alert('an error occurred!'); 
      } 
     }); 
     console.log(tags.length); 
     for (var k = 0, len = tags.length; k < len; k++) { 
      console.log(tags[k]); 
     } 
    }); 
}