Запрос нескольких таблиц JSON внутри JavaScript для цикла

Question

Codepen with working example.

Я еще новичок в JavaScript, так что я мог бы идти об этом неправильно. Если вы можете предложить мне лучший способ сделать это, я бы очень признателен; всегда любите изучать новый, лучший способ!

Здесь идет:

Я использую массив Ид для генерации URL, из 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 и использовать его в качестве ЦСИ изображений для вставки в документ.

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

Вот вопрос: мне нужно иметь полученные изображения в том же порядке, как массив Ид

Каждый раз, когда страница загружается, изображения отображаются в другом порядке. Я знаю, что это происходит, потому что запросы поступают в несколько раз, что приводит к другому порядку загрузки каждой страницы.

Имеет ли это какое-то отношение к хранению вызовов 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

В нашем цикле iDfor мы изменим Аякса что-то вроде этого ...

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, мы знаем, что все запросы были выполнены, а al 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; 
} 

Надежда, что помогает ...