将多个对象数组合并为一个对象数组

Question

I need your help. I have the following line of code which returns me one or more arrays depending on the checkbox that is clicked.

So far everything ok.

selected.forEach(langsel => {
                let filtered = person.filter(pers => pers.language == langsel);
            })

selected and I do not report the other variables for simplicity in reading.

For example I get:

First array: [{id: "2", name: "Tomas Addreh", language: "English"},{id: "6", name: "Mark Addreh", language: "English"}];

Second array: = [{id: "15", name: "Alex Atres", language: "Spanish"}, {id: "1", name: "Mark Sertoj", language: "Spanish"}, id: "12", name: "Martha Forrest", language: "Spanish"];

These are two separate arrays; in the sense that if I click the checkbox of interest I get the first array, if I click a second checkbox (always leaving the first checkbox checked) I get the array related to the second checkbox losing the first related to the previously clicked checkbox.

I don't want the former to be lost but I want them to be merged into one array .

Answer 1

If you simply want to merge them and aren't worried about collisions, I would use concat.

array1.concat(array2) will solve your problem. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

If you want some logic on the merge, there are many other ways to do it, but the best approach most likely depends on what the logic is.

Answer 2

You can simply achieve this requirement by using Array.filter() along with Array.includes() method. I added the descriptive comments in the below code snippet.

Try this :

 // Input person array const person = [{ id: "2", name: "Tomas Addreh", language: "English" }, { id: "6", name: "Mark Addreh", language: "English" }, { id: "15", name: "Alex Atres", language: "Spanish" }, { id: "1", name: "Mark Sertoj", language: "Spanish" }, { id: "12", name: "Martha Forrest", language: "Spanish" }]; // Initializing an array to get selected checkbox values. const selectedPerson = []; // getSelectedPerson() method invoke on checkbox value change. function getSelectedPerson(event) { // This line of code is used to push the selected languages from the checkboxes on checked into an array and remove if checbox unchecked. event.target.checked ? selectedPerson.push(event.target.value) : selectedPerson.splice(selectedPerson.indexOf(event.target.value), 1); // If there is any checbox selected then it will go inside this condition. if (selectedPerson.length) { // To filtered out the person array based on the languages available in selectedPerson array. const filtered = person.filter(({ language }) => selectedPerson.includes(language)); // Assignign a result into a "result" div document.getElementById('result').innerHTML = JSON.stringify(filtered, null, 2); } else { // else case document.getElementById('result').innerHTML = []; } }

 <input type="checkbox" id="english" name="english" value="English" onchange="getSelectedPerson(event)"> <label for="english"> English</label><br> <input type="checkbox" id="spanish" name="spanish" value="Spanish" onchange="getSelectedPerson(event)"> <label for="spanish"> Spanish</label><br> <pre id="result"></pre>