Necesito tu ayuda. Tengo la siguiente línea de código que me devuelve una o más matrices según la casilla de verificación en la que se hace clic.
Hasta aquí todo bien.
selected.forEach(langsel => { let filtered = person.filter(pers => pers.language == langsel); })seleccionado y no reporto las otras variables por simplicidad en la lectura.
Por ejemplo me sale:
Primera matriz: [{id: "2", nombre: "Tomas Addreh", idioma: "Inglés"},{id: "6", nombre: "Mark Addreh", idioma: "Inglés"}];
Segunda matriz: = [{id: "15", nombre: "Alex Atres", idioma: "Español"}, {id: "1", nombre: "Mark Sertoj", idioma: "Español"}, id: " 12", nombre: "Martha Forrest", idioma: "Español"];
Estas son dos matrices separadas; en el sentido de que si hago clic en la casilla de verificación de interés, obtengo la primera matriz, si hago clic en una segunda casilla de verificación (siempre dejando marcada la primera casilla de verificación) obtengo la matriz relacionada con la segunda casilla de verificación, perdiendo la primera relacionada con la casilla de verificación previamente seleccionada.
No quiero que se pierda el primero, pero quiero que se fusionen en una matriz .
Si simplemente desea fusionarlos y no le preocupan las colisiones, usaría concat.
array1.concat(array2) resolverá su problema. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
Si desea algo de lógica en la combinación, hay muchas otras formas de hacerlo, pero el mejor enfoque probablemente depende de cuál sea la lógica.
Simplemente puede lograr este requisito utilizando Array.filter() junto con el método Array.includes() . Agregué los comentarios descriptivos en el siguiente fragmento de código.
Prueba esto :
// 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>