每个带有提要数组的 Javascript JSON

Question

在我的示例中，我试图从我的数组 feedUrls 中列出的每个提要中获取 ID 和 Description，但是获取方式的顺序提取的每个提要都不匹配。

如下所示，结果不是我数组中从第一个到最后一个提要，尽管它们的提要列在数组 feedUrls 中，从 001 到 005。

var feedUrls = ["https://api.myjson.com/bins/nkvdl", "https://api.myjson.com/bins/13wd2h", "https://api.myjson.com/bins/1b1kbt", "https://api.myjson.com/bins/10zc7d", "https://api.myjson.com/bins/60sqx"];

var arrayData1 = [];
var arrayData2 = [];

var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
};

feedUrls.forEach(function(entry) {
getJSON(entry,
  function(err, data) {
    if (err !== null) {
      alert('Something went wrong: ' + err);
    } else {
      try {
        arrayData1.push("<li>" + data[0].id + "</li>");
      } catch (e) {}
      document.getElementById('listId1').innerHTML = arrayData1.join("");
    }
  });
});

feedUrls.forEach(function(entry) {
getJSON(entry,
  function(err, data) {
    if (err !== null) {
      alert('Something went wrong: ' + err);
    } else {
      try {
        arrayData2.push("<li>" + data[0].title + "</li>");
      } catch (e) {}
			document.getElementById('listId2').innerHTML = arrayData2.join("");
    }
  });
});

ul {
display: inline-block;
}

<ul id="listId1">empty</ul>
<ul id="listId2">empty</ul>

结果:

001
005
004
003
002
title 001
title 004
title 002
title 005
title 003

预期:

001
002
003
004
005
title 001
title 002
title 003
title 004
title 005 

Answer 1

forEach()为回调提供一个索引，您可以使用它来按预期顺序收集结果，例如

var feedUrls = ["https://api.myjson.com/bins/nkvdl", "https://api.myjson.com/bins/13wd2h", "https://api.myjson.com/bins/1b1kbt", "https://api.myjson.com/bins/10zc7d", "https://api.myjson.com/bins/60sqx"];

var arrayData1 = [];
var arrayData2 = [];

var getJSON = function(url, callback, index) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response, index);
    } else {
      callback(status, xhr.response, index);
    }
  };
  xhr.send();
};

feedUrls.forEach(function(entry, index) {
getJSON(entry,
  function(err, data, index) {
    if (err !== null) {
      alert('Something went wrong: ' + err);
    } else {
      try {
        arrayData1[index]="<li>" + data[0].id + "</li>";
      } catch (e) {}
      document.getElementById('listId1').innerHTML = arrayData1.join("");
    }
  },index);
});

feedUrls.forEach(function(entry, index) {
getJSON(entry,
  function(err, data) {
    if (err !== null) {
      alert('Something went wrong: ' + err);
    } else {
      try {
        arrayData2[index]="<li>" + data[0].title + "</li>";
      } catch (e) {}
			document.getElementById('listId2').innerHTML = arrayData2.join("");
    }
  },index);
});

ul {
display: inline-block;
}

<ul id="listId1">empty</ul>
<ul id="listId2">empty</ul>

新的部分是 index 变量。

否则如评论所述:您有许多独立的 XHR-s，无法保证它们的完成顺序。