Soy nuevo aqui. Encontré un maravilloso Skript en github . Mis preguntas: ¿cómo puedo obtener los datos fuera de "myForm.addEventListener"? Intenté declararlo como Variable global, pero en mi caso no funciona. Espero que Yu no pueda ayudarme.
const myForm = document.getElementById("myForm"); const csvFile = document.getElementById("csvFile"); function csvToArray(str, delimiter = ",") { // slice from start of text to the first \n index // use split to create an array from string by delimiter const headers = str.slice(0, str.indexOf("\n")).split(delimiter); // slice from \n index + 1 to the end of the text // use split to create an array of each csv value row const rows = str.slice(str.indexOf("\n") + 1).split("\n"); // Map the rows // split values from each row into an array // use headers.reduce to create an object // object properties derived from headers:values // the object passed as an element of the array const arr = rows.map(function (row) { const values = row.split(delimiter); const el = headers.reduce(function (object, header, index) { object[header] = values[index]; return object; }, {}); return el; }); // return the array return arr; } myForm.addEventListener("submit", function (e) { e.preventDefault(); const input = csvFile.files[0]; const reader = new FileReader(); reader.onload = function (e) { const text = e.target.result; const data = csvToArray(text); document.write(JSON.stringify(data)); }; reader.readAsText(input); }); <head> </head> <body> <form id="myForm"> <input type="file" id="csvFile" accept=".csv" /> <br /> <input type="submit" value="Submit" /> </form> </body>Puede construir FileReader y definir su método .onload cualquier lugar. También puede llamar a su método .readAsText cualquier lugar, pero tenga en cuenta que el código asume que el elemento "csvFile" tiene una propiedad .files similar a una matriz que contiene al menos un archivo para leer. (También tenga en cuenta que, aunque .onload aparece antes en el script que .readAsText , no se aplica hasta después; así es como el navegador sabe que .readAsText obtuvo un resultado).
Si esa suposición es cierta tan pronto como se carga la página, puede hacer todo de inmediato (como en un oyente DOMContentLoaded ). Por otro lado, si la suposición solo se vuelve válida después de que el usuario complete algunos campos del formulario, no puede leerlo mucho antes que el detector de eventos de envío.
Cualquier acción que desee realizar con el texto del archivo debe ocurrir dentro del método .onload del lector porque ahí es donde el contenido del archivo está disponible por primera vez para su secuencia de comandos. El código existente crea una buena variedad de objetos de fila (vinculados a data ), luego sobrescribe audazmente toda la página web con él (después de codificarlo en una cadena JSON).
Probablemente prefiera escribir una función que recorra cada columna (propiedad) dentro de cada fila (objeto) y haga algo con el valor. Para empezar, podría imprimir cada par clave/valor en la consola del navegador, como:
for (const thisRowObj of data){ for (const thisKey in thisRowObj){ const thisValue = thisRowObj[thisKey]; console.log(`${thisKey}: ${thisValue}`); } }