javascript - 在 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