时间戳

首页 > 解决方案 > 每个带有提要数组的 Javascript JSON

javascript - 每个带有提要数组的 Javascript JSON

问题描述

在我的示例中，我试图获取ID和从数组feedUrls描述，但是获取每个提要的顺序不匹配。

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

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

标签： javascriptarraysjsonforeach

解决方案

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，它们的完成顺序不能保证。

推荐阅读