Как в цикле for in сделать цикл?

Question

[narkesss]

$(document).ready(function () {

	var coin = ['BTC', 'ETH', 'LTC'];

	var btc = $('.forgant-items-BTC');
	var lth = $('.forgant-items-LTH');
	var eth = $('.forgant-items-ETH');

	var arr = [btc, lth, eth];

	$(function() {

		$('#currency-list').change(function() {
			var curVal = $("#currency-list option:selected").val();

				$(function() {

					for (var i in coin) {

					 	$.ajax({
					 		url: 'https://apiv2.bitcoinaverage.com/indices/global/ticker/' + coin[i] + curVal,
					 		dataType: 'json',
					 		success: function (data) {
					 			

					 				var price = data.changes.price,
								 	    percent = data.changes.percent,
						 			    hours = $('<span>', { class: "list-item-hour", text: price.hour}),
						 			    day = $('<span>', { class: "list-item-day", text: price.day}),
									    week = $('<span>', { class: "list-item-week", text: price.week}),
									    month = $('<span>', { class: "list-item-month", text: price.month});
					 			
							},

							 error: function (jqXHR, exception) {
							    console.log('error')
							 }

						};
					};
				});
			});
		});
});

Как сделать цикл в цикле , например в 1 цикле 1 итерация во 2 цикле 1 итерация и выход , в 1 цикле 2 итерация во 2 цикле 2 итерация, и так 3 раза?

Comments

[Максим Тимофеев]

Вложить цИкл в цИкл, в чем проблема? Проще было бы, если бы Вы приложили исходный массив и результирующий. Потому как пока не понятно в чем у Вас проблема.

[Юрий]

А для чего вообще нужен второй цикл?

[Юрий]

Мой предыдущий вопрос к тому что по вашему описанию второй "цикл" работает не как цикл а как набор команд первого цикла, т.к. прерывается на каждой итерации первого цикла.

[narkesss]

Юрий, Вообще есть 3 апи в переменных подставляю в урлы аякса, и нужно на каждой итерации вывести обьект json в определенную секцию.

[narkesss]

Максим Тимофеев, есть масив с 3 элементами , через фор ин подставляется api. в аякс
И их поочередно нужно вывести в секции , 1 запрос в 1 блок, 2 в 2 и т.д

[narkesss]

Юрий, Прикрипил код может вам так понятней будет

[Максим Тимофеев]

narkesss, не особо понятнее стало. Вероятно надо сформировать вначале нужный массив, а потом перебирать

Answer 1

[Ihor Bratukh]

От нечего делать написал Вам jQuery плагин с ним будет намного проще.

Вот что требуется написать c вашей стороны.:
HTML
<div class="crypto"></div>

JAVASCRIPT

var $crypto = $('.crypto').btcav({
	crypto: ['BTC', 'ETH', 'LTC'],
	currency: 'USD',
	sort: {
		key: 'open.day',
		order: 'desc'
	},
	show: function(data) {
		return `
			<div class="item">
				<span class="item-name">${data.symbol}</span>
				<span v-trand class="item-price">$${data.open.day}</span>
			</div>
		`;
	}
});

Вот что вставится в DOM:
HTML

<div class="crypto">
	<div class="item">
		<span class="item-name">BTC</span>
		<span class="item-price up">$7016.04</span>
	</div>
	<div class="item">
		<span class="item-name">ETH</span>
		<span class="item-price up">$281.6768</span>
	</div>
	<div class="item">
		<span class="item-name">LTC</span>
		<span class="item-price up">$62.1099</span>
	</div>
</div>

Вот пример на codepen с демонстрацией всех "фишек" таких как шаблонизатор и хранилище store.

Comments

[Ihor Bratukh]

Вот Вам очень краткая версия, что же происходит под капотом. Вставте это в консоль браузера и посмотрите результат.
P.S. Вместо последовательного цикла в цикле используется паралельные запросы с помощью `$.when`, функция `ajaxAll`

var data = {};

ajaxAll(['BTC', 'ETH', 'LTC'], function(crypto) {
	return $.ajax({
		url: 'https://apiv2.bitcoinaverage.com/indices/global/ticker/' + crypto + 'USD',
		method: 'GET',
		dataType: 'json',
		success: function(response) {
			data = $.extend({}, data || {}, getObjectWithKey(crypto, response));
		}
	});
}).done(function() {
	console.log(data);
	appendResult($('body'), data, function(item) {
		return `
			<div class="item">
				<div class="item-price">$${item.changes.price.day}</div>
			</div>
		`;
	});
});

function appendResult($container, data, callback) {
	var collection = [];
	for (var item in data) {
		$.merge(collection, $(callback.call($container, data[item])));
	}
	$container.append(collection);
}

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

function getObjectWithKey(key, value) {
	var object = {};
	object[key] = value;
	return object;
}