Как сделать ajax в цикле что бы после каждого респонса продолжать работать с данными?

Question

[Сергей Шевченко]

Всем привет. У меня на странице около 10 графиков со статистикой, так получилось из-за структуры проекта и не оптимизированной БД что одним запросом не получится для всех графиков забрать данные. Приходится городить цикл в котором собираю массив с этим блоками-графиками и блок в html выглядит примерно так:

<div id="chart-linear-schedule-for-operators"
       data-type="chart"
       data-chart="line"
       data-url="#chart-linear-schedule-for-operators"
></div>

и получается у меня примерно такой код в js:

$(document).ready(function () {
    let chartBlockList = $('[data-type="chart"]');

    if (chartBlockList.length) {
        for (let i = 0; i < chartBlockList.length; i++) {
            $.ajax({
                url: data.url,
                type: "POST",
                dataType: 'json',
                data: {
                    data: JSON.stringify({item: i})
                },
                success: function(resp) {
                    if (typeof resp['data'] !== "undefined") {
                        if (resp['data'].length > 0) {
                            switch (data.type) {
                                  case 'line':
                                      DrawLineChart(chartBlockList[i].id, resp['data_pie_hot_offer']);
                                  break;
                                  case 'pie':
                                      DrawPieChart(chartBlockList[i].id, resp['data_pie_hot_offer']);
                                  break;
                            }
                        } else {
                            chartBlockList[i].innerHTML = '<div class="empty">No data<div>';
                        }
                    }
                }
            });
        }
    }
});

И вот в switch переменной i нет, вот как это грамотно делается? Вроде промисами, но попробовал, не получилось отсылаю (приходится делать костыль) я этот i беру и тоже на сервер отправляю и также с сервера его возвращаю, но я знаю что это не гуд и где то что то я делаю неправильно. Ткните носом пожалуйста как это делается по простому?

Answer 1

[Ihor Bratukh]

Здесь у Вы можете использовать Promise.all или аналог jQuery $.when или использовать замыкание, чтобы замкнуть переменную i;
Замыкание

$(function() {
	let $chart = $('[data-type="chart"]');

	for (let i = 0; i < $chart.length; i++) {
		(function(index) {
			$.ajax({
				success: function() {
					console.log('Замыкание', index);
				}
			})
		})(i);
	}
});

Запуск всех запросов паралельно, jQuery $.when

$(function() {
	var $chart = $('[data-type="chart"]');

	if ($chart.length) {
		ajaxAll($chart, function(index) {
			return getChartData($(this).data('url'), index);
		}).done(function() {
			console.log('ajaxAll', 'Все запросы завершенны');
		});
	}

	function ajaxAll($selector, each) {
		var promise = [];
		$.each($selector, function() {
			promise.push(each.apply(this, arguments));
		});
		return $.when.apply(null, promise);
	}

	function getChartData(link, index) {
		return $.ajax({
			url: link,
			method: 'POST',
			dataType: 'json',
			contentType: 'application/json',
			data: JSON.stringify({
				data: {
					item: index
				}
			}),
			success: function(response) {
				console.log('getChartData', 'Одиночный запрос завершен успешно', index);
			}
		});
	}

});

Comments

[Сергей Шевченко]

Ваш второй пример вроде бы работает и отправляет все запросы одновременно (а это лучше чем в цикле я делал)
Но мне нужно использовать index внутри success что бы данные которые приходят с сервера со статистикой применил к тому графику который послал этот запрос

[Ihor Bratukh]

Сергей Шевченко, Так и в чем проблема, вот же success и index:

console.log('getChartData', 'Одиночный запрос завершен успешно', index);

здесь и делайте что нужно

[Сергей Шевченко]

Блин не обессудь бро ошибка на серваке была и в success не попадал, исправил - заработало =) Спасибо огромное!
Лучший ответ!