AJAX - Подождите, пока данные будут добавлены до следующего цикла

Question

Я создаю выпадающий список в JavaScript, я загружаю данные через Ajax и JSON, на данный момент мой код проходит через набор отделов и запускается в вызов ajax на каждой итерации.

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

Я хочу, чтобы иметь возможность пройти через мой вызов Ajax и добавить данные в том порядке, в котором я объявляю (для каждого отдела). это что-то, что можно сделать?

Вот мой код:

//-- Ajax -- 
var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales']; 
var i; 

for (i = 0; i < departments.length; i++) { 
    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/EmployeesDropDown", 
     data: '{X: "' + departments[i] + '"}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "text json", 
     async: true, 
     success: createdropdown, 
     failure: function() { 
      alert("FAIL!"); 
     } 
    }); 
} 


//-- Creates dropdown -- 
function createdropdown(data) { 
...appends all the data to my drop down list... 
    } 

Любая помощь или советы оценили, спасибо заранее.

EDIT: Этот вопрос отличается от связанных, потому что мне нужно иметь возможность прокручивать строковый массив, а не просто итерировать на основе чисел.

Answer 1

Если вы хотите загрузить отделы в порядке их появления в departments массиве вы можете загрузить их по одному, ожидая каждый АЯКС запроса закончить, пока вы не начнете следующий запрос.

Вот пример:

var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales']; 
 
var i = 0; 
 

 
function reqDep(department) { 
 

 
    /* 
 
    Since i can't use ajax here let's use a promise. 
 
    */ 
 

 
    var p = new Promise(function(res, rej) { 
 
    setTimeout(function() { 
 
     res(department) 
 
    }, 1000) 
 
    }) 
 
    return p; 
 

 
    // This is what you would actually do. 
 

 
    /* 
 
    var data = '{X: "' + department + '"}' 
 
    return $.ajax({ 
 
    type: "POST", 
 
    url: "Default.aspx/EmployeesDropDown", 
 
    data: data, 
 
    contentType: "application/json; charset=utf-8", 
 
    dataType: "text json", 
 
    }); 
 
    */ 
 
} 
 

 
function initDepartments(index) { 
 
    reqDep(departments[index]) 
 
    // Here you would use `.done(function(data...` 
 
    // I am using `.then(function(data...` 
 
    // because of the promise. 
 
    .then(function(data) { 
 
    console.log(data) 
 
    if(i < departments.length) { 
 
     initDepartments(i) 
 
    } 
 
    }) 
 
    i++; 
 
}; 
 

 
initDepartments(i)