0
247
VistasCrear un archivo json desde un formulario html
Tengo un formulario html y quiero crear un archivo json con datos introducidos en campos html.
En este momento, está visible en el texto json de la consola, pero no crea un nuevo archivo json con este contenido.
Además, tengo un error, Uncaught ReferenceError: require no está definido.
// get the form element from dom const formElement = document.querySelector('form#forms') // convert the form to JSON const getFormJSON = (form) => { const data = new FormData(form); return Array.from(data.keys()).reduce((result, key) => { if (result[key]) { result[key] = data.getAll(key) return result } result[key] = data.get(key); return result; }, {}); }; // handle the form submission event, prevent default form behaviour, check validity, convert form to JSON const handler = (event) => { event.preventDefault(); const valid = formElement.reportValidity(); if (valid) { const result = getFormJSON(formElement); // handle one, multiple or no files uploaded const images = [result.images].flat().filter((file) => !!file.name) // handle one, multiple or no languages selected const languages = [result.languages || []].flat(); // convert the checkbox to a boolean const isHappyReader = !!(result.isHappyReader && result.isHappyReader === 'on') // use spread function, but override the keys we've made changes to const output = { ...result, images, languages, isHappyReader } console.log(output) } } formElement.addEventListener("submit", handler) const fs = require('fs'); const dataNew = JSON.stringify(output); fs.writeFile('output.json', dataNew, (err) => { if (err) { console.log("error") throw err; } console.log("JSON data is saved."); }); </script> </body>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Parece que estás en el frontend. No puede escribir archivos como este debido a la seguridad. Esto daría como resultado que todos los sitios web con algo de JavaScript puedan escribir archivos en su sistema y usted realmente no quiere eso. Además, fs es una API de nodo que no está disponible en el navegador.
Una opción sería descargar el archivo JSON desde la interfaz, lo que podría hacer con el siguiente código:
/** * Download a JSON file. * @param {sting} filename filename * @param {any} obj any serializeable object */ function downloadJson(filename, obj) { // serialize to JSON and pretty print with indent of 4 const text = JSON.stringify(obj, null, 4); // create anchor tag var element = document.createElement("a"); element.setAttribute( "href", "data:application/json;charset=utf-8," + encodeURIComponent(text) ); element.setAttribute("download", filename); // don't display the tag element.style.display = "none"; // add tag to document document.body.appendChild(element); // click it: this starts the download element.click(); // remove the tag again document.body.removeChild(element); } window.addEventListener("DOMContentLoaded", (event) => { // Start file download. downloadJson("helloWorld.json", { hello: "World" }); });Si agrega eso a su página, aparecerá el cuadro de diálogo Guardar en el sistema de un usuario. Aquí el que estoy recibiendo en Ubuntu:
Y aquí el contenido del archivo descargado: 
Lea este hilo sobre los pros y los contras de usar un enfoque como este.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta