Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   БД JSON вывод через jQuery (https://javascript.ru/forum/jquery/54213-bd-json-vyvod-cherez-jquery.html)

Infinity178 09.03.2015 10:19

БД JSON вывод через jQuery
 
Доброго дня!

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

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

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

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


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

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

dd_smol 09.03.2015 12:51

Пример 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>

Infinity178 09.03.2015 15:17

На выходе - 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.

Infinity178 09.03.2015 15:18

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

dd_smol 09.03.2015 15:49

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

Infinity178 09.03.2015 16:41

если
{
   "name":"value"
}

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

но если

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


то выдает objectObject

Infinity178 09.03.2015 16:42

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

danik.js 09.03.2015 17:00

Цитата:

Сообщение от Infinity178
выдает objectObject

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

dd_smol 09.03.2015 17:00

При условии, что, если есть данный 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>

Infinity178 09.03.2015 19:07

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

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


Часовой пояс GMT +3, время: 04:34.