Question

我有一个数组，我想填写AJAX调用的响应，如下：

var dict = [];

function fillArray(){
  $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++){
        $.get("https://api.twitch.tv/kraken/streams"  , function(data){
          dict[data.key] = data;
    });
  });
}

function doStuff(){
  // dict is empty or undefined here
}

我如何用对象填充dict，以便我可以在doStuff（）中检索它们？目前，我能够在dict中插入东西但是当我尝试在fillArray（）函数之外访问dict时，我得到一个空的dict变量，因为我假设GET调用是异步的并且直到之后才发生所有JS代码都已执行......

Answer 1

因此，dict是object，没有push方法。你需要dict=[];如果你必须拥有{}，那么你需要使用key：value对来填充它，例如：

dict[key] = value;

Answer 2

您将必须跟踪您在for循环中正在执行的调用次数，并在完成后触发回调函数。通过调用无限量的ajax请求，我对你当前的解决方案并不完全有信心，但我也不完全理解你的问题范围或你正在与之交谈的服务器。

所以基本上你必须用目前的东西做这样的事情：

var dict = [],
  requestsCompleted = 0;


function dictFilled() {
  // do something with your dict variable;
}

function fillArray(){
  $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++){
        $.get("https://api.twitch.tv/kraken/streams"  , function(data){
          dict[data.key] = data;
          requestsCompleted++;
          if (requestsCompleted === phpReturnVal.length) {
            dictFilled();
          }
    });
  });
}

这还没有经过测试，但基本上你必须定义一个能够访问你正在填充的数组的函数，并在异步请求成功完成后调用它。对于这样的任务，我建议你看一下jQuery's Deferred API。这些请求之一总是有可能失败，如果发生这种情况，您的应用程序应该知道该怎么做。

Answer 3

我假设GET调用是异步的，直到发生才会发生在所有JS代码执行完毕后......

显得正确。

尝试

var dict = [];

function fillArray() {
  // return jQuery promise object
  return $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++) {
        // call same `url` `phpReturnVal.length` times here ?,
        // returning same `data` response at each request ?,
        // populating, overwriting `dict` with same `data.key` property ?
        $.get("https://api.twitch.tv/kraken/streams"  , function(data) {
          dict[data.key] = data;
        });
    }; // note closing `}` at `for` loop
    // return value
    return dict
  });
}

function doStuff(data) {
   // `data`:`dict`, promise value returned from `fillArray`
   console.log(data);
}

fillArray().then(doStuff, function error(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});

var arr = ["a", "b", "c"];
var response = {
  "a": 1,
  "b": 2,
  "c": 3
};
var obj = {};
var dict = [];

function fillArray() {
  return $.when(arr).then(function(phpReturnVal) {
    for (var i = 0; i < phpReturnVal.length; i++) {
      // return same `response` here ?
      $.when(response).then(function(data) {
        dict[arr[i]] = data;
      });
    };
    return dict
  });
}

function doStuff(data) {
  console.log(data)
}

fillArray().then(doStuff, function error(err) {
  console.log(err)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

使用嵌套的AJAX调用响应填充数组

3 个答案: