Tengo una función que toma elementos del DOM para actualizar una base de datos al hacer clic en el botón. Actualmente, hay una identificación para un valor...
<input class='total' doc-id='12345678' value='${whateverCurrent.value}'>user updates</field> <input class='total' doc-id='87654321' value='${whateverCurrent.value}'>user updates</field>Esta es la función:
const elements = document.querySelectorAll('.total') await Promise.all(Array.from(elements).map(async (el) => { let docId = el.id; let total = el.value; await updateDoc(docId, { total }); }))Ahora necesito dividir esto de modo que haya 4 clases de campos de entrada en lugar de 1 (por trimestre). Entonces habrá diferentes elementos pero con la misma identificación:
<input class='q1' doc-id='12345678' value='${whateverCurrent.value}'>user updates</field> <input class='q2' doc-id='87654321' value='${whateverCurrent.value}'>user updates</field> <input class='q2' doc-id='12345678' value='${whateverCurrent.value}'>user updates</field>Podría ejecutar la función Promise.all 4 veces, una para cada clase, pero eso debe estar mal, cuando en cambio debería hacerlo de alguna manera...
// (do something here){ await updateDoc(docId, {q1, q2, q3, q4}) }cuando tomo todos los elementos y los coloco en una matriz y los miro en la consola, obtengo una matriz de 4 NodeLists.
¿Cómo tomo estas 4 listas de nodos y las combino para que cada identificación tenga sus 4 valores para pasar a la función de actualización?
No estoy muy seguro de si esto es lo que estás buscando. ¿Puede ser más específico en lo que la función updateDoc espera como argumentos?
De todos modos, codifiqué algo que recopila todos los valores trimestrales por ID de documento y produce un objeto de la siguiente forma:
{ 1234 : { q1 : 7 q2 : 9 }, ... } const elements = document.querySelectorAll('input') const docsPerQ = {}; elements.forEach(e => { const docId = e.getAttribute('doc-id'); const val = e.value; const quarter = e.className; if(!(docId in docsPerQ)) docsPerQ[docId] = {}; docsPerQ[docId][quarter] = val; }); console.log(docsPerQ); <input type="text" class="q1" value="7" doc-id="1234"> <input type="text" class="q1" value="2" doc-id="5678"> <input type="text" class="q2" value="3" doc-id="5678"> <input type="text" class="q2" value="9" doc-id="1234">Una NodeList es un objeto similar a una matriz que representa una colección de elementos DOM o, más específicamente, nodos. Es como una matriz, pero no puede usar los métodos de matriz comunes como map(), slice()