Как отфильтровать по инпутам-чекбоксам массив элементов с помощью метода filter?

Question

[75db77]

Вот есть у меня 4 инпута и 4 элемента в массиве:
https://jsfiddle.net/9mv7sab0/1/
Нужно чтобы при нажатии, например на инпут usa, отоброзился где нибудь на странице элемент из массива arr -"new-york", при нажатии на инпут france элемент из массива arr - "paris" и т.д.
Нашел такой интересный метод filter, и его синтаксис:

var arr = [1, -1, 2, -2, 3];
var positiveArr = arr.filter(function(number) {
  return number > 0;
});
alert( positiveArr ); // 1,2,3

Ну вроде по примеру понятно как фильтрует метод, а вот как в моем случае отфильтровать и как связать мои инпуты с
c массивом arr и функцией что содержит метод filter не знаю. Подскажите пожалуйста как реализовать такую фильтрацию

Answer 1

[Дмитрий]

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

var arr = [
	{ country: 'Italy', capital: "rome"},
  { country: 'usa', capital: 'Washington'},
  { country: 'france', capital: 'Paris'},
  { country: 'spain', capital: 'Madrid'},
]

const onClick = () => {
	const countriesChecked = Array.from(document.querySelectorAll('.btn') )
    .filter(item => item.checked)
    .map(item => item.value)
    
  const cities = arr
  	.filter(elem => countriesChecked.includes(elem.country))
    .map(elem => elem.capital)  
    
    alert(cities)
}

[...document.querySelectorAll('.btn')].forEach(item => {
	item.addEventListener('click', onClick)
})

Comments

[75db77]

я для примере идентичние названия написал, суть такая:сделать как в интернет магазине, нажал на чекбокс, отобразился товар соответствующий, нажал на другой чекбокс, другой.
А можете код ваш в песочнице сбросить, как должно работать? А то я что-то у меня не получается отфильтровать

[Дмитрий]

75db77, Вот прямо этот код и вставьте в песочницу, повесив на событие нажатия на чекбокс.

[75db77]

Дмитрий, да я вставил, но у меня не работает(

[Дмитрий]

75db77, Не надо ставить грустных смайликов, где ваша решимость и настойчивость в поиске истины? =)

[75db77]

Дмитрий, да, я уже и так и сяк вставляю код, но не отображаются элементы массива

[Дмитрий]

75db77, Изменил ответ, написал код полностью - так должно работать

[75db77]

Дмитрий, спасибо огромное!

Answer 2

[dollar]

Не понятно, что именно вы хотите. То есть какую проблему вы решаете.
Ловить события можно примерно так:
https://jsfiddle.net/ayc2ekj0/

Answer 3

[0xD34F]

const checked = Array.from(document.querySelectorAll('.btn:checked'), n => n.value);
const filtered = arr.filter(n => checked.includes(n));

Comments

[75db77]

https://jsfiddle.net/rd2q0tsw/
может я не правильно понял вас, но у меня не работает(

[0xD34F]

Если "не работает" это всё, что вы способны сообщить... лучше бы молчали.

[75db77]

0xD34F, сбросьте пожалуйста реализацию вашего кода в песочнице

[0xD34F]

<div id="filters"></div>
<div id="filtered"></div>

const arr = [
  'italy', 'usa', 'spain', 'usa', 'usa',
  'france', 'spain', 'france', 'usa',
  'italy', 'spain', 'usa', 'france'
];

const filters = document.querySelector('#filters');

filters.innerHTML = Array
  .from(new Set(arr), n => `<label><input type="checkbox" value="${n}">${n}</label>`)
  .join('');

filters.addEventListener('change', function() {
  const checked = Array.from(this.querySelectorAll(':checked'), n => n.value);

  document.querySelector('#filtered').innerHTML = arr
    .filter(n => checked.includes(n))
    .map(n => `<span class="${n}">${n}</span>`)
    .join(', ');
});

#filtered {
  font-size: 48px;
}

.italy { color: green; }
.spain { color: yellow; }
.france { color: blue; }
.usa { color: red; }

[75db77]

0xD34F, спасибо большое!