Estoy tratando de poner los valores de la matriz 'allValues' dentro de las claves existentes en el objeto de memoria, pero en su lugar, solo se agregan al objeto después de las claves existentes, y esas claves son el número de índice. ¿Cómo se pueden insertar los valores en las claves existentes en su lugar?
const memories = { email: '', date: '', relation: '', tips: '', location: '', }; const backend = (e) => { e.preventDefault(); const allInputs = Array.from(document.querySelectorAll('input')); const allValues = allInputs.map(input => input.value); for (const [index, value] of allValues.entries(){ memories[index] = value; } console.log(memories); };Está recuperando los valores de entrada como una matriz, por lo que no tiene ninguna información sobre los nombres de los campos de formulario.
Probablemente quieras algo como:
const allInputs = Array.from(document.querySelectorAll('input')); const allValues = allInputs.map(({name, value}) => ({name, value})); for (const {name, value} of allValues) { memories[name] = value; }Fragmento completo:
const memories = { email: '', date: '', relation: '', tips: '', location: '', }; const allInputs = Array.from(document.querySelectorAll('input')); const allValues = allInputs.map(({name, value}) => ({name, value})); for (const {name, value} of allValues) { memories[name] = value; } console.log(memories); <input name="email" value="test@example.com"> <input name="location" value="World">Ver ejemplo de trabajo en CodeSandbox .
índice.html
<!DOCTYPE html> <html> <head> <title>Example</title> <meta charset="UTF-8" /> </head> <body> <input type="text" name="email" value="a" /> <input type="text" name="date" value="b" /> <input type="text" name="relation" value="c" /> <input type="text" name="tips" value="d" /> <input type="text" name="location" value="e" /> <button onclick="backend()">Submit</button> <script src="src/index.js"></script> </body> </html>índice.js
const memories = { email: "", date: "", relation: "", tips: "", location: "" }; window.backend = () => { const allInputs = Array.from(document.querySelectorAll("input")); allInputs.forEach((input) => { memories[input.name] = input.value; }); console.log(memories); };Establezca un atributo de name para cada entrada. El método document.querySelectorAll() devuelve un NodeList y puede iterarlo con for..of . Desestructurar el name y el value en el bucle for..of y actualizar el objeto.
const memories = { email: '', date: '', relation: '', tips: '', location: '', }; for (const { name, value } of document.querySelectorAll('input')) { memories[name] = value; } console.log(memories); <input name="email" value="test@example.com" /> <input type="text" name="date" value="1.1.1970" /> <input type="text" name="relation" value="father" /> <input type="text" name="tips" value="tip" /> <input name="location" value="World" /> También puede usar el método NodeList.forEach() en lugar de for..of :
const memories = { email: '', date: '', relation: '', tips: '', location: '', }; document.querySelectorAll('input') .forEach(({ name, value }) => { memories[name] = value; }); console.log(memories); <input name="email" value="test@example.com" /> <input type="text" name="date" value="1.1.1970" /> <input type="text" name="relation" value="father" /> <input type="text" name="tips" value="tip" /> <input name="location" value="World" />