在javascript for循环中查询多个JSON表

Question

Codepen with working example.

我还是 javascript 的新手，所以我可能会以错误的方式处理这个问题。如果您能建议我这样做的更好方法，我将不胜感激；总是喜欢学习一种新的、更好的方法！

这里是：

我使用数组 iD 来生成要从中提取数据的 10 个 JSON 表的 URL。

var set = $('.set');

var iD = [
  "od6",
  "o9mpc0w",
  "ol96q2e",
  "olqcdyz",
  "ojfsm09",
  "oijguh3",
  "obmuic4",
  "oup920g",
  "ohwlz67",
  "omk1ruv"
];

function photoSet(){

  var idLength = iD.length;

  for (var i = 0; i < idLength; i++) {

遍历数组后，我会使用 ajax 调用来查询每个数组。

    $.ajax({
      url:'https://spreadsheets.google.com/feeds/cells/1TBjwQNVRMNzuyZRxr9yX-fUKWw6gpUX69o9PQc79COs/' + iD[i] + '/public/values?alt=json',
      async: true,
      dataType: 'jsonp',
      success: photos});

查询完成后，我从每个 JSON 表的单元格中检索数据，并将其用作图像 src 以插入到文档中。

    function photos(results){
      for(var a = 1; a <= 1; a++) {
        var imageEntry = results.feed.entry[a].content.$t;
        set.append('<li class="image"><img src="'+ imageEntry +'"/></li>');
        console.log(imageEntry);
      }
    } 
  }
}

photoSet();

问题是这样的：我需要使生成的图像与数组iD

的顺序相同

每次页面加载时，图像都会以不同的顺序显示。我知道这样做是因为查询进入的时间略有不同，因此导致每个页面加载的顺序不同。

它是否与将 ajax 调用存储在变量中，然后一次抓取一个有关？我需要另一个回调吗？随着嵌套变得越来越复杂，我越来越困惑：/

我一直在寻找如何做到这一点，但似乎无法弄清楚。似乎每有一个新发现，就会出现一个新问题。我想这就是代码的本质。谢谢大家的帮助:)

另外，I saw this question，但我无法弄清楚如何将其答案应用于我的代码。如果我这样做了，我会立即删除这个问题。

Answer 1

您可以将id添加到li的大楼中-

set.append('<li class="image" id="sequnce"><img src="'+ imageEntry +'"/></li>');

例如

<li class="image" id="1"><img src="d.gif"/></li>
<li class="image" id="4"><img src="d.gif"/></li>
<li class="image" id="3"><img src="d.gif"/></li>

完成从 Json 中检索所有数据后，您可以对 li 进行排序。 你可以使用这个链接How to sort LI's based on their ID

Answer 2

在我们的 iD for 循环中，我们将 ajax 更改为类似这样...

var allResults = {}, successCount = 0;
$.ajax({
  url: 'https://spreadsheets.google.com/feeds/cells/1TBjwQNVRMNzuyZRxr9yX-fUKWw6gpUX69o9PQc79COs/' + iD[i] + '/public/values?alt=json',
  async: true,
  dataType: 'jsonp',
  success: function( results ) {
    successCount++;
    allResults[ iD[i] ] = photos( results );
    if ( successCount == iD.length ) {
      //All data received...
      for (var i2 = 0; i2 < idLength; i2++) {
        set.append( allResults[ iD[i2] ] )
      }

    }
  }
});

现在我们调用匿名（未命名）函数而不是直接调用照片，该函数跟踪成功的 ajax 请求计数并将图像 HTML 存储在新对象 allResults 中，键匹配 iD 数组。当成功计数等于 iD.length 时，我们知道所有请求都已发出，并且所有 HTML 都保存在 allResults 对象中。然后我们像处理ajax 请求一样运行for 循环，并按iD 数组的顺序填充数据。

photos 函数现在不会立即将append html 转换为set，而是返回所有数据，它应该看起来像这样...

function photos(results){
  returnString = '';
  for(var a = 1; a <= 1; a++) {
    var imageEntry = results.feed.entry[a].content.$t;
    returnString += '<li class="image"><img src="'+ imageEntry +'"/></li>';
    console.log(imageEntry);
  }
  return returnString;
}

希望对您有所帮助...