There is such a code that filters the array by the specified parameters and outputs the result to the console. In this case, the code samples by the color value with the red property and the number with the property 10 in the objects that fill the array.

The code works, but the problem will arise, for example, when there are more than two check-boxes. I tried to use the cycle, but nothing happened. Help to modify the code so that there is no need to list inputs by index, i.e. that there was one function that would perform a common task.

var colorsAndNumbers = [{ color: 'red', number: 10 }, { color: 'yellow', number: 10 }, { color: 'red', number: 5 }, { color: 'black', number: 5 }, { color: 'red', number: 5 } ] var form = document.querySelector('.filters'); var inputs = Array.from(document.querySelectorAll('.filters input')); var formChangeHandler = function() { var newList = colorsAndNumbers.filter(function(item) { if (inputs[0].checked) { return item.color === inputs[0].value; } else { return item; } }). filter(function(item) { if (inputs[1].checked) { return item.number === +inputs[1].value; } else { return item; } }); console.log(newList); } form.addEventListener('change', formChangeHandler); 
 <div class="main"> <form action="#" class="filters"> <input type="checkbox" name="features" value="red" id="color"> <label class="feature" for="color">Color Red</label> <input type="checkbox" name="features" value="10" id="number"> <label for="number">Number 10</label> </form> </div>

  • I am amazed - you have marked the correct answer, which not only does not work , but even when editing errors in the code does not perform the task . So no one will respond to you with this behavior! Read the help : What to do with the answers to my question - Bharata

1 answer 1

You have an array of inputs, each with its own id , which is similar to the key of the filtered Holy Island. From this and you can move

 const colorsAndNumbers = [{ color: 'red', number: 10 }, { color: 'yellow', number: 10 }, { color: 'red', number: 5 }, { color: 'black', number: 5 }, { color: 'red', number: 5 } ] const form = document.querySelector('.filters'); const inputs = Array.from(document.querySelectorAll('.filters input')); const applyFilter = (input, data) => ( input.value == data[input.id]; ); const formChangeHandler = () => { // получаем список инпутов, по которым нужно отфильтровать const filters = inputs .filter(input => input.checked); // для каждого элемента в data применяем фильтр из инпутов // и если хотя бы один фильтр вернул false значит убираем элемент const newList = colorsAndNumbers.filter(data => { for(let f in filters) { if(!applyFilter(filters[f], data)) return false; } return true; }); console.log(newList); } form.addEventListener('change', formChangeHandler); 
 <div class="main"> <form action="#" class="filters"> <input type="checkbox" name="features" value="red" id="color"> <label class="feature" for="color">Color Red</label> <input type="checkbox" name="features" value="10" id="number"> <label for="number">Number 10</label> </form> </div>