Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2015, 11:19
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

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

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

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

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

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


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

Заранее огромная благодарность за любую информацию по теме.
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2015, 13:51
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

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

Последний раз редактировалось dd_smol, 09.03.2015 в 14:32.
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2015, 16:17
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

На выходе - 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.
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2015, 16:18
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

я полагаю логически нужно установить ключи по которым будет отбор строк, дальнейшее преобразование и вывод в HTML
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2015, 16:49
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

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

Последний раз редактировалось dd_smol, 09.03.2015 в 17:12.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2015, 17:41
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

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

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

но если

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


то выдает objectObject
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2015, 17:42
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

просто не особо хочется создавать N кол-во .json
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2015, 18:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Infinity178
выдает objectObject
Так ты сделай два each(), один вложи в другой, как у dd_smol в примере.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2015, 18:00
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

При условии, что, если есть данный 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, 09.03.2015 в 18:05.
Ответить с цитированием
  #10 (permalink)  
Старый 09.03.2015, 20:07
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перенос Name элемента через Jquery titanrat Общие вопросы Javascript 2 05.12.2012 14:20
AJAX JSON jQuery valera5505 AJAX и COMET 1 19.02.2012 11:09
проблема парсинга json с помощью jquery frolvict jQuery 15 16.09.2011 22:35
Сортировка и фильтрация json jQuery amt779 jQuery 4 28.07.2011 12:53
подгрузка файлов через jQuery imdogma jQuery 4 05.05.2009 21:46