javascriptarraysnodelist

How to amalgamate an array of Nodelists into a single array


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?


Solution

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

    EDIT

    I changed the code a bit so the produced output is in a more manageable form. It's now an array of objects with some extra keys attached:

    [
      {
        docId: 1234,
          quarters: {
            q1: 7,
            q2: 3
          }
      },
      ...
    ]
    

    const elements = document.querySelectorAll('input');
    const QsPerDoc = [];
    
    elements.forEach(e => {
        const docId = e.getAttribute('doc-id');
        const val = e.value;
        const quarter = e.className;
        const entry = QsPerDoc.find(e => e.docId === docId);
    
        // find returns undefined if nothing's found. undefined is a falsy value
        if(!entry) {
            let quarters = {};
            quarters[quarter] = val;
    
            QsPerDoc.push({
                docId : docId,
                quarters
            });
        }
        else {
            entry.quarters[quarter] = val;
        }
    });
    
    console.log(QsPerDoc);
    <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">

    Maybe this works better? Hope it does. I wonder, is the updateDoc function something you can change so it can accept arrays?

    You could access them like this:

    console.log(QsPerDoc[0].docId);
    console.log(QsPerDoc[0].quarters.q1);
    

    (Note: I also changed the name of the object/array to QsPerDoc instead of DocsPerQ, which was not aplty named)

    Anyway I have to get back to work instead of procrastinating on stackoverflow ;)