Javascript分配函數返回數組到另一個數組與所有元素

Question

在$（document）.ready中，我在ajax請求中創建了一個函數，該函數返回添加到數組中的json數據。我從該函數返回數組，但是當我嘗試分配什麼返回給另一個數組時，我的警報不顯示數組中充滿了值。

function retrieveGroupNames() { 
     var rows = new Array(); 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("LookUpGroupName", "UserManager")', 
      dataType: "json", 
      data: {}, 
      success: function (data) { 
       for (var i = 0; i < data.length; i++) { 
        rows[i] = { 
         data: data[i], 
         value: data[i].group, 
         result: data[i].group 
        } 
//     alert(data[i].group); 
        //     alert(data[1].group); 
       } // end of for loop 
       //    alert(rows[1].value); 


      } // end of success 
     }); // end of ajax 
//  alert(rows); data here 
     return rows; 

    } // end of function 

$(document).ready(function() { 
     chkSelection(); 
     var rows = []; 
     rows = retrieveGroupNames(); 
     alert(rows); 
    }); 

請幫忙嗎？謝謝！

Answer 1

AJAX是異步的。你不能退還依賴於請求完成的東西。你需要使用一個回調來代替：

function retrieveGroupNames(callback) { 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("LookUpGroupName", "UserManager")', 
     dataType: "json", 
     data: {}, 
     success: function(data) { 
      var rows = []; 
      for(var i = 0; i < data.length; i++) { 
       rows[i] = { 
        data: data[i], 
        value: data[i].group, 
        result: data[i].group 
       } 
      } 
      callback(rows); 
     } 
    }); 
} 

$(document).ready(function() { 
    chkSelection(); 
    retrieveGroupNames(function(rows) { 
     alert(rows); 
    }); 
}); 

Answer 2

比ThiefMaster的回答提供的回調以外的另一種選擇是使用$.Deferred objects。使用deferreds可以控制異步處理期間何時發生的事情，如ajax調用。

function retrieveGroupNames() { 
    // create a deferred object 
    var deferred = new $.Deferred(); 

    $.ajax({ 
     ... 
     success: function(data) { 
      var rows = []; 
      for(var i = 0; i < data.length; i++) { 
       rows[i] = { 
        data: data[i], 
        value: data[i].group, 
        result: data[i].group 
       } 
      } 
      // resolve the deferred and pass the rows as data 
      deferred.resolve(rows); 
     } 
    }); 

    // return a promise 
    return deferred.promise(); 
} 

$(document).ready(function() { 
    // use the when...then syntax to consume the deferred function 
    $.when(retrieveGroupNames()).then(function (rows) { 
     // do whatever you want with rows 
    }); 
}); 

還要注意的是$.ajax已經返回一個承諾本身，所以你可以只說return $.ajax({...});在retrieveGroupNames功能。