Question

我还是javascript的新手，所以我可能会以错误的方式解决这个问题。如果你能为我建议一个更好的方法，我会非常感激;总是喜欢学习一种新的，更好的方式！

这里是：

我使用数组 iD 生成我从中提取数据的10个JSON表格中的网址。

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>');

e.g

<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对象中。然后，我们像for请求一样运行ajax循环，并按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;
}

希望有帮助...

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

2 个答案: