0
373
Vistas¿Cómo exportar una matriz desde dentro de addEventListener a otro archivo JS?
Mi aplicación web tiene una página de filtro, donde si se establece el valor del último filtro, addEventListener crea una matriz usando filter() , desde mi matriz de conjunto de datos, filterArr , en función de los valores elegidos en los elementos seleccionados.
¿Cómo exporto la matriz resultante a otro archivo JS?
El uso export default arrForQuiz genera el error "token inesperado: exportación".
He agregado el código para addEventListener y una imagen de lo que estoy intentando. Además de eso, ambos archivos JS involucrados tienen type="module" y, como en la imagen, la matriz del conjunto de datos original ya está importada desde un tercer archivo.
Soy bastante nuevo en esto. Obtuve todo tipo de errores extraños cuando usé un archivo JS (para dos páginas), así que cambié a este enfoque que hasta ahora funciona bien. Si no es una gran idea, soy todo oídos.
Código:
chooseSection.addEventListener("input", () => { let arrForQuiz = filterArr.filter( function(el) { return el.book === chooseBook.value && el.chapter === chooseChapter.value && el.section === chooseSection.value; }); // export arrForQuiz to another file }); Visual: 
2 Respuestas
Responde la pregunta0
arrForQuiz como una exportación y la importaría en los archivos que quiero compartir. De esta manera, los cambios realizados en un archivo serán visibles en el otro.
Por ejemplo, así:
shared-stuff.js
export const sharedObject = []; file-a.js
import { sharedObject } from './shared-stuff.js'; // moving the pointer will push a `1` into the shared array window.addEventListener('pointermove', () => sharedObject.push(1); file-b.js
import { sharedObject } from './shared-stuff.js'; // clicking the window will output the shared arrays current content window.addEventListener('click', () => console.log(sharedObject));Para que esto funcione, el valor exportado debe ser un objeto y no se puede reasignar en uno de los archivos que lo usan. De lo contrario, no habrá un enlace común a la memoria compartida.
En su ejemplo, el filtrado debería conservar la matriz original, por lo que tendría que volver a escribir el filtrado. En lugar de arrForQuiz = filterArr.filter(...) , haría algo como esto:
// we iterate over the array in reverse order, as we might change the input array // and we don't want to mess up the indexing for (let i = arrForQuiz.length - 1; i < 0; i -= 1) { const el = arrForQuiz[i]; if (el.book === chooseBook.value && el.chapter === chooseChapter.value && el.section === chooseSection.value) { continue; } // Array.prototype.splice changes the array in place arrForQuiz.splice(i, 1); }Podría seguir con un enfoque más funcional para manejar la matriz, al exportar un objeto, que tiene un campo, que contiene la matriz. Aquí hay un poco más de detalle sobre lo que quiero decir con eso:
shared-stuff-2.js
export const state = { sharedArray: [] }; Si define su exportación de esta manera, los cambios en el objeto de state se comparten nuevamente entre las importaciones, pero con la diferencia de que normalmente puede asignar campos, como en nuestro caso sharedArray , y esos cambios se propagarán a otros archivos que importan el objeto.
0
Después de innumerables intentos de diferentes cosas, esto es lo que funcionó. Gracias a Andre por la inspiración. Su respuesta probablemente debería funcionar, creo que simplemente no lo estaba haciendo bien.
Solución:
Pase los valores seleccionados al otro archivo js con sessionStorage y realice el filtrado allí.
Código en filter.js:
-> a medida que cambia el valor del último elemento seleccionado, almacene todos los valores seleccionados en sessionStorage.
chooseSection.addEventListener("input", () => { sessionStorage.setItem('storedBook', chooseBook.value); sessionStorage.setItem('storedChapter', chooseChapter.value); sessionStorage.setItem('storedSection', chooseSection.value); }); Código en script.js:
-> obtenga los valores seleccionados de sessionStorage y utilícelos para filtrar la matriz de datos.
let selectedBook = sessionStorage.getItem('storedBook'); let selectedChapter = sessionStorage.getItem('storedChapter'); let selectedSection = sessionStorage.getItem('storedSection'); let quizArr = mainArr.filter( function(el) { return el.book === selectedBook && el.chapter === selectedChapter && el.section === selectedSection; }); Visual:
