Выполните итерацию по массиву, вызывая $ .ajax для каждого элемента.Вернуть массив со всеми результатами ajax

Question

Я только начал работать с JavaScript для нетривиальных вещей, так что это, вероятно, просто ...

То, что я пытаюсь сделать: перебрать массив ссылок на товары, получить JSONдля каждой ссылки и вернуть массив всей информации о продукте (с хэш-подобной структурой, проиндексированной по ссылке).

Что я пробовал:

function fetchProductData(references){
  var product_data = new Object();
  references.forEach(function(ref){
    $.ajax({
      url: "http://localhost:3000/products/find.js?reference=" + ref,
      dataType: "jsonp",
      type: "GET",
      processData: false,
      contentType: "application/json",
      success: function(data) {
        product_data[ref] = data;
      }
    });
  });
  alert('before return: ' + product_data);
  return product_data;
};

$(document).ready(function(){
  var products = fetchProductData(references);
  alert('products : ' + products);
});

Вот что я надеваюне понимаю: когда я в первый раз вызываю alert для отображения содержимого массива, массив пуст.Однако при втором вызове массив заполняется нужными мне данными.

Другими словами, «products:» alert отображает данные, которые я хочу, в приведенном выше коде.Но если я прокомментирую «до возврата: alert», это больше не будет.Почему это так?

Итак, мой вопрос: как я могу сделать так, чтобы jQuery сделал несколько вызовов $ .ajax для получения информации о продукте, сбора этой информации в массив и возврата этого массива, чтобы я мог использовать ее в другом месте в моемcode?

Кроме того, почему данные в переменной магически доступны после того, как на них есть ссылка в alert?

Answer 1

«A» в «AJAX» означает «асинхронный» :).Ваша программа не ждет завершения вызова, прежде чем перейти к следующей итерации, а это означает, что вы, вероятно, не получите все свои данные.Также предупреждение имеет ту же проблему.Операция для конкатенации «до возврата:» в строку добавляет достаточно времени, чтобы получить некоторые данные в переменной.На более быстрой машине вы можете обнаружить, что никогда не получите данные.

Я думаю, вам действительно нужно переосмыслить свой подход.Не очень хорошая идея иметь несколько AJAX-запросов в цикле.Это значительно увеличит задержку страницы.Передайте все свои параметры один раз, используя JSON, затем выполните цикл сценариев на стороне сервера и верните один ответ в JSON.

function fetchProductData(references){
  // make sure your "references" is a JSON object
  $.getJSON('http://server/side/url', {'json':references}, function(product_data) {
      // do something with product_data (alert them, put them in an array, etc)

  });
}

Answer 2

function fetchProductData(references, cb){
  var length = 0;
  var product_data = new Object();
  references.forEach(function(ref){
    length++;
    $.ajax({
      url: "http://localhost:3000/products/find.js?reference=" + ref,
      dataType: "jsonp",
      type: "GET",
      processData: false,
      contentType: "application/json",
      success: function(data) {
        product_data[ref] = data;
        if (++count === length) {
          cb(product_data);
        }
      }
    });
  });

};

$(document).ready(function(){
  var products = fetchProductData(references, function(products) {
    alert('products : ' + products);
  });
});

Используйте обратный вызов для вашей асинхронной операции .

Причина, по которой он работает с вызовом alert, заключается в том, что оповещение о сообщении дает ajax достаточно времени для заполнения вашегомассив.Оператор return срабатывает только после того, как вы нажмете OK в окне предупреждения, предоставив вашему коду окно 250 мс для заполнения массива данными.

Answer 3

Вы выполняете ajax-запрос в асинхронном режиме.И вы хотите синхронизировать результат.Попробуйте добавить:

async: false

Надеюсь, это поможет.

Answer 4

Это асинхронная операция.Единственный надежный способ узнать, когда данные готовы, - это функция обратного вызова: success: function () {...}, которая вызывается, когда данные наконец возвращаются.Поместите туда свое предупреждение.

Answer 5

Ваш $.ajax вызов является асинхронным, поэтому происходит то, что в первый раз, когда вы делаете вызов, ваш javascript выполняет вызов, переходит на следующую строку (оповещение) и затем зацикливается. Ваши данные еще не вернулись. Чтобы исправить это, нужно установить опцию async: false в вызове $.ajax.