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.
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.
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>