How to amalgamate an array of Nodelists into a single array-CodePudding

I have a function that takes elements from the DOM to update a db on button click. Currently, there is one id for one value...

 <input class='total' doc-id='12345678' value='${whateverCurrent.value}'>user updates</field>
 <input class='total' doc-id='87654321' value='${whateverCurrent.value}'>user updates</field>

This is the function:

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 });
    }))

I now need to break this down such that there are 4 classes of input fields rather than 1 (by quarter). So there will be different elements but with the same id:

<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>

I could run the Promise.all function 4 times, once for each class, but that must be wrong, when instead I should somehow....

 // (do something here){
       await updateDoc(docId, {q1, q2, q3, q4})
 }

when I take all the elements and put them into an array and look at them in the console, I get an array of 4 NodeLists.

How do I take these 4 nodeLists and amalgamate them so that every id has its 4 values to pass to the update function?

CodePudding user response：

I'm not really sure if this is what you're looking for. Can you be more specific in what the updateDoc function expects as arguments?

Anyway, I coded something that collects all the quarterly values per doc-id and produces an object of following form:

{
  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"  value="7" doc-id="1234">
<input type="text"  value="2" doc-id="5678">
<input type="text"  value="3" doc-id="5678">
<input type="text"  value="9" doc-id="1234">

CodePudding user response：

A NodeList is an array-like object that represents a collection of DOM elements or more specifically nodes. It is just like an array, but you can not use the common array methods like map(), slice()