Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Поиск по json (https://javascript.ru/forum/dom-window/77506-poisk-po-json.html)

Янковиц 14.05.2019 14:57

Поиск по json
 
Добрый день. У меня есть json массив:
<script type='text/javascript'>
/* <![CDATA[ */
var DATA = {"variable":[{"item_id":19,"item_image":"","item_variation":{"steklo":"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435","material":"\u043c\u0435\u0442\u0430\u043b\u043b"},"item_price":"110"},{"item_id":20,"item_image":"","item_variation":{"steklo":"\u043e\u0431\u044b\u0447\u043d\u043e\u0435","material":"\u043c\u0435\u0442\u0430\u043b\u043b"},"item_price":"130"},{"item_id":21,"item_image":"","item_variation":{"steklo":"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435","material":"\u043f\u043b\u0430\u0441\u0442\u0438\u043a"},"item_price":"150"},{"item_id":22,"item_image":"","item_variation":{"steklo":"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435","material":"\u0434\u0435\u0440\u0435\u0432\u043e"},"item_price":"160"},{"item_id":23,"item_image":"","item_variation":{"steklo":"\u043e\u0431\u044b\u0447\u043d\u043e\u0435","material":"\u043f\u043b\u0430\u0441\u0442\u0438\u043a"},"item_price":"175"},{"item_id":24,"item_image":"","item_variation":{"steklo":"\u043e\u0431\u044b\u0447\u043d\u043e\u0435","material":"\u0434\u0435\u0440\u0435\u0432\u043e"},"item_price":"199"}]};
/* ]]> */
</script>


И есть форма:
<form id="buy" action="" method="post">
	<div class="variations">
		<input type="radio" id="material-1" value="металл" name="material">
		<label class="variations__item" for="material-1">металл</label>
		
		<input type="radio" id="material-2" value="пластик" name="material">
		<label class="variations__item" for="material-2">пластик</label>
		
		<input type="radio" id="material-3" value="дерево" name="material">
		<label class="variations__item" for="material-3">дерево</label>
		<div class="error">Пожалуйста, выберите "Материал"</div>
	</div>

	<div class="variations">
		<input type="radio" id="steklo-1" value="ударопрочное" name="steklo">
		<label class="variations__item" for="steklo-1">ударопрочное</label>
		
		<input type="radio" id="steklo-2" value="обычное" name="steklo">
		<label class="variations__item" for="steklo-2">обычное</label>
	</div>	

	<div class="buy__btn">
		<input type="hidden" value="100" name="price">
		<input type="hidden" value="12" name="product-id">
		<input class="buy__btn_submit" type="submit" value="В корзину" data-click="Оформить">
	</div>
</form>

Подскажите как реализовать. Пользователь кликает по inputы, в зависимости от комбинации инпутов получить item_id, item_image, item_price. Буду благодарен за любую помощь.

Важный момент: заранее неизвестно количество блоков радиокнопок.

Янковиц 14.05.2019 15:42

Я написал пока следующее:
jQuery('#buy input[type="radio"]').click(function() {
		var data = {};
		$('#buy').find ('input, select').each(function() {
			data[this.name] = $(this).val();
		});
		// здесь бы надо проверку
		$.each(DATA.variable,function(i,variation) {
			console.log(variation.item_variation);
		});
	});

console.log(data) выводит:
{material: "дерево", steklo: "обычное"}

laimas 14.05.2019 16:15

$(function() {
    var btn = $('#buy :radio').change(function() {
        var a = this, b = btn.not(this).filter(':checked')[0], f = {}
        if(b) {
            $.each(DATA.variable, function() {
                if(this.item_variation[a.name]==a.value && this.item_variation[b.name]==b.value)
                f.id = this.item_id;
                f.img = this.item_image;
                f.price = this.item_price;
            });
            console.log(f);
        }
    });
});

Янковиц 14.05.2019 16:19

Здорово. Вы меня уже не первый раз выручаете. А возможно ли одновременно событие на выбор select?

Янковиц 14.05.2019 16:21

Не совсем понимаю код. Сработает ли он, если в наборе будет 1 блок радиокнопок или скажем 3 или 4?

laimas 14.05.2019 16:24

Цитата:

Сообщение от Янковиц
Здорово

Здорово будет только при условии, что каждый набор, это уникальное значение, в противном случае получите данные последнего набора. Это я к тому, что как понимать "заранее неизвестно количество блоков радиокнопок"?

Цитата:

Сообщение от Янковиц
возможно ли одновременно событие на выбор select?

Каком select и что значит одновременно?

laimas 14.05.2019 16:26

Цитата:

Сообщение от Янковиц
Сработает ли он, если в наборе будет 1 блок радиокнопок или скажем 3 или 4?

Дело не в количестве, а в связях кнопок с объектом и их значениями.

Янковиц 14.05.2019 16:28

Цитата:

Сообщение от laimas (Сообщение 507733)
Здорово будет только при условии, что каждый набор, это уникальное значение, в противном случае получите данные последнего набора. Это я к тому, что как понимать "заранее неизвестно количество блоков радиокнопок"?



Каком select и что значит одновременно?

Да, у меня все наборы радиокнопок c уникальным name.
Что касается select. Вопрос в том, будет ли скрипт работать, если нужно проверить 1-2 блока радиокнопок, а 3-ий блок опция - select?

laimas 14.05.2019 16:34

Цитата:

Сообщение от Янковиц
Не совсем понимаю код.

var btn = $('#buy :radio').change(function() { //коллекция всех кнопок и обработчик их изменения
        var a = this, //текущая кнопка
        b = btn.not(this).filter(':checked')[0], //вторая кнопка из набора или если их больше, 
//то будет коллекция в этом случае нужно обходить эту коллекцию в цикле, сравнивая имя и значения каждой соответственно с объектом  
        f = {}
        if(b) { //есть ли выбор кроме одной кнопки? тогда ...


То есть, если будет и уйма наборов кнопок, то не беда, весь этот набор (параметры его элементов имя/значения) в цикле сравнивать с набором в объекте. Но у вас то в объекте их два, значит и объект будут содержать более?

Янковиц 14.05.2019 16:35

В перспективе будет от 0 до 10-15 наборов радиокнопок и селектов вперемешку.


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