БД JSON вывод через jQuery
 

Доброго дня!

с JSON я полный нуб.. Не прошу решать задачу за меня, достаточно будет дать ссылки на нормальный мануал.

Задача:
База параметров JSON (или можно аналог, json как по мне вид приятней)
Нужно вывести в SELECT (список) через JavaScript или лучше jQuery

Скелет базы, примерно:

{
   "effects": {
       "name1": "value1",
       "name2": "value2",
       "name3": "value3"
   },
   "easing": [
       "name1": "value1",
       "name2": "value2"
   ]
}

Я не могу просто понять каким способом привязать JSON к JQ функции и преобразовать массив в переменные

Заранее огромная благодарность за любую информацию по теме.

Пример HTML на выходе, который должен получится можно?
Преобразования строки в объект:

$.parseJSON

Перебрать объект или массив:

$.each

Отсебятина:

jQuery(function($) {
	var data = $.parseJSON('{"effects": {"name1": "value1", "name2": "value2", "name3": "value3"},' + 
							'"easing": {"name1": "value1", "name2": "value2"}}');

	$.each(data, function( name, value ) {
		if ( $.isPlainObject( value ) || $.isArray( value ) ) {
			var select = $('<select />', {'name': name});
			
			$.each( value, function( name, value ) {
				select.append( $('<option />', {'value': name, 'text': value}) );
			});
			
			$('body').append(select);
		}
	});
});

На выходе получится:

<select name="effects">
	<option value="name1">value1</option>
	<option value="name2">value2</option>
	<option value="name3">value3</option>
</select>
<select name="easing">
	<option value="name1">value1</option>
	<option value="name2">value2</option>
</select>

На выходе - HTML то что нужно. но вот проблема:

если мы парсим через

$.parseJSON

- данные через файл не загрузить
если мы используем

$.getJSON

- то не пойму как преобразовать строки...

+ что касательно HTML - то тут момент следующий:

<select> = jsonNAME {JSON}

и установить нужно каждый SELECT в нужный блок.

Детальный пример на выходе:

<div class="divID">
   <span>Эффекты для изображения</span>
<select name='loadJSON-effects'>.....</select>
</div>
<div class="divID">
   <span>Эффекты для страницы</span>
<select name='loadJSON-page'>.....</select>
</div>
.... ect.

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

В $.getJSON сам преобразовывает строку в js объект т.ч $.parseJSON не требуется.

если

{
   "name":"value"
}

результат нужный

но если

{
   "exemple" {
        "name":"value"
   }
}

то выдает objectObject

просто не особо хочется создавать N кол-во .json

Так ты сделай два each(), один вложи в другой, как у dd_smol в примере.

При условии, что, если есть данный HTML на страницы реализовать можно таким образам.

<div class="divID">
	<span>Эффекты для изображения</span>
	<select name='loadJSON-effects'></select>
</div>
<div class="divID">
	<span>Эффекты для страницы</span>
	<select name='loadJSON-easing'></select>
</div>

// json.php: '{"effects": {"name1": "value1", "name2": "value2", "name3": "value3"}, "easing": {"name1": "value1", "name2": "value2"}}'
jQuery(function($) {
	$.getJSON('json.php', function( data ) {
		$.each(data, function( select, options ) {
			var select = $('select[name=loadJSON-' + select + ']');
			
			if ( !select && !($.isPlainObject( options ) || $.isArray( option )) ) {
				return;
			}
			
			$.each(options, function( value, text ) {
				select.append('<option value="' + value + '">' + text + '</option>');
			});
		});
	});
});

Если же создавать SELECT на лету, то мне нужно понять по какому принципу их вставлять в блоки <div class="divID">
Ведь у каждого блока свой уникальный заголовок <span>Эффекты для изображения</span> || <span>Эффекты для страницы</span>

Огромная благодарность dd_smol

Этого решения достаточно для выгрузки. Я правильно понимаю -
Каждый след. уровень в JSON формате это дополнительный цикл в jQuery?