Как быть с двойным циклом for jquery?

Question

[maragon]

Как быть с двойным for?
пример:

spoiler

$('select[name="category_id"]').change(function () {
		get_properties($("option:selected", this).val());
	});
function get_properties(category_id){
		realestate_id = $("input[name=id]").val();
		$.ajax({
			url: "/api/backend/get_properties",
			data: {
					category_id: category_id,
					realestate_id: realestate_id
			},
			dataType: 'json',
			success: function (data) {
				for (i = 0; i < data.length; i++){
					var property = data[i];
					var line = $('<div class="form__item"><label for="'+property.id+'">'+property.name+'</label></div>'); 
					
						
						$.ajax({
							url: "/api/backend/get_values",
							data: { property_id: property.id },
							dataType: 'json',
							success: function (data) {
								for (i = 0; i < data.length; i++){
									var variant = data[i];
									var variant_line = $("<div class='form__item'><input type='radio' name='properties["+variant.property_id+"]' class='form__radio' id='"+variant.id+"' class='form__radio'><label for='"+variant.id+"'>"+variant.name+"</label></div>"); 
									variant_line.appenTo(line);
									 
								} 
								
							} 
						});
						
					properties.appenTo(line);
				}
				
			},
			error: function (){
				$(properties).html('Ошибка сервера при загрузке параметров');
			}
		});
	}

<select name="category_id">
    <option value="0">Первая</option>
    <option value="2">Вторая</option>
</select>
<div id="properties"></div>

Мне нужно чтобы вывелось примерно так:
- Название свойства ( label )
-- Ниже варианты (label + input)

А в данной реализации выводится сначала все названия свойств, а ниже все варианты.
Как быть?

Comments

[Станислав Б]

при чем тут пхп?

Answer 1

[Exploding]

Ого наворотили то как!))) Почему просто одним запросом не получать нужный объект, а уже по надобности построения списка - обращаться к его свойствам?
Там я так понимаю вместо appenTo имелось ввиду appendTo наверно (2 раза)

UPD:
Ну на сервере берем массив в котором данные все в нужном формате, и возвращаем его:

$data = array("propName_1" => "value1", "propName_2" => "value2");
echo json_encode($data, JSON_FORCE_OBJECT);

Получить это все:

var jsonData = $.ajax({
	  url: "/api/backend/get_properties",
	  async: false
	 }).responseText;
	jsonData = $.parseJSON(jsonData);
	console.log(jsonData.propName_1); // value1

И вот у нас в глобальной области jsonData - все что надо. Берем и лепим... скульптуру))

Comments

[maragon]

Про appenTo - все верно, очепятка.
Дайте пример "просто одним запросом не получать нужный объект".. etc

[Exploding]

maragon, обновилъ)

[maragon]

Exploding, в том то и дело, что на сервере формирую массив вида:

id свойства = array( тип свойства, название свойства, варианты = array(id => name))

и не знаю как разробрать на клиенте такой массив. ;(

[Exploding]

maragon, ну пример массива можно глянуть?

Answer 2

[eRKa]

Добавьте в "/api/backend/get_values" параметр async: false .
Из-за того, что запрос асинхронный, он не дожидается ответа от запроса и делает properties.appenTo(line);
Еще вариант, учесть, что аякс метод возвращает промис, а значит можно сделать что-то подобное $.ajax({...}).then(function(){ properties.appenTo(line); })