在 array.filter() 中使用“&&”条件过滤

Question

So people i have 3 checkboxes:

                    <label>
                        <input type="checkbox" value="Java" id="check-java" class="check-java filled-in" 
                         />
                        <span>Java</span>
                    </label>
                    &nbsp;
                    <label>
                        <input type="checkbox" value="JavaScript" id="check-javascript" class="check-javascript filled-in" />
                        <span>JavaScript</span>
                    </label>
                    &nbsp;
                    <label>
                        <input type="checkbox" value="Python" id="check-python" class="check-python filled-in"
                             />
                        <span>Python</span>
                    </label>

And when a user select this checkboxes i catch it in an eventListener`:

const checkBoxes = document.querySelectorAll('input[type=checkbox]');
checkBoxes.forEach((box) => {
    return box.addEventListener('change', filterByCheckBox)
});

So, when the user select two or more of this checkboxes i need to filter an array (devsFiltered), there contains a sub-array called "programmingLanguages" and in this array i have 3 possible values "Java,JavaScript or Python" and i need to filter only if the array contains the two or more values selected by the checkboxes, the code i'm trying to use:

function filterByCheckBox(e) {
                const checkOption = e.target.value;
                if (devsFiltered.length > 0) {
                    const filtered  = devsFiltered
                    .filter(item => item.programmingLanguages
                        .every(lang => lang.language == checkOption));
                         mapUsers(filtered)
                }
        }

Answer 1

You need to get all the selections and you need to see if all the checked items are in the array.

 var people = [ { name: "w", codes : ['a', 'b'] }, { name: "x", codes : ['a', 'c'] }, { name: "y", codes : ['a', 'b'] }, { name: "z", codes : ['b','c'] } ]; var form = document.querySelector("form"); form.addEventListener("change", function() { // get all the checked checkboxes const selections = document.querySelectorAll('[type="checkbox"]:checked'); // get all their values const values = selections && [...selections].map(({ value }) => value); // filter the list to make sure all the values are in the object const filtered = values ? people.filter(({ codes }) => values.every(code => codes.includes(code))) : people; // Just to display something console.log(filtered.map(f => f.name).join(",")); });

 <form id="form"> <label for="a">A</label><input type="checkbox" id="a" value="a" /> <label for="b">B</label><input type="checkbox" id="b" value="b" /> <label for="c">C</label><input type="checkbox" id="c" value="c" /> </form>

in a format that is a bit more readable

You need to get all the selections and you need to see if all the checked items are in the array.

 var people = [ { name: "w", codes : ['a', 'b'] }, { name: "x", codes : ['a', 'c'] }, { name: "y", codes : ['a', 'b'] }, { name: "z", codes : ['b','c'] } ]; var form = document.querySelector("form"); form.addEventListener("change", function() { let filtered = people; const selections = document.querySelectorAll('[type="checkbox"]:checked'); if (selections) { const values = [...selections].map(x => x.value); filtered = people.filter(person => values.every(code => person.codes.includes(code) ) ) } // Just to display something console.log(filtered.map(f => f.name).join(",")); });

 <form id="form"> <label for="a">A</label><input type="checkbox" id="a" value="a" /> <label for="b">B</label><input type="checkbox" id="b" value="b" /> <label for="c">C</label><input type="checkbox" id="c" value="c" /> </form>