How can I get the sum of all the values from a dynamically generated column?

Question

So I have this code where I get the values from an XML file and dynamically create a table displaying the data. Where I am getting stuck at is when I am trying to get the totals from a specific column and then displaying them at the bottom. For example;

Column 3 3 5 6 Total 14

I can actually create and console.log a listNode but I can't necessarily do anything with that list. Thanks for your help.

This is the HTML code:

   `<div id='employees-student'>
    <table id='record' cellpadding='10px' style="text-align:left;">
        <thead>
            <tr>
                <th>Week</th>
                <th>Date Range</th>
                <th>Appointments</th>
                <th>Tested Drive Through</th>
                <th>Positive Drive Through</th>
                <th>Positive Tested Offsite</th>
                <th>Cumulative Positive Rate</th>
                <th>Hospitalized Drive Through</th>
                <th>Hospitalized Tested Offsite</th>
            </tr>                
        </thead>
        <tbody>

        </tbody>
    </table>
</div><!--content ends-->
`

This is the JavaScript code:

    <script>

window.onload = function () {

const recordsTableRows = function() {
let data = '';

let tableRecords = document.querySelector('#record');

let totals = document.querySelector('.totals');


fetch('DataDashboard.xml').then(function(resp) {
    return resp.text();
}).then(function(data) {


    let parser = new DOMParser(),
    xmlDoc = parser.parseFromString(data, 'text/xml');
    let records = xmlDoc.querySelectorAll('RECORD');
    let totals = xmlDoc.querySelectorAll('RECORD');
    let cumulative = 0;
    let positives = 0;
    let tested = 0;
    let posDrive = 0;
    let posTested = 0;
    let testDrive = 0;


    records.forEach(recordXmlNode => {


    let row = document.createElement('tr');

    //Week
    let td = document.createElement('td');
    td.innerText = recordXmlNode.children[9].innerHTML;
    row.appendChild(td);

    //Date Range
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[0].innerHTML;
    row.appendChild(td);

    //Appointments
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[1].innerHTML;
    row.appendChild(td);

    // const appointmentsArr = td.innerText;

    //Tested Drive Through  
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[2].innerHTML;
    row.appendChild(td);

    testDrive += Number(recordXmlNode.children[2].innerHTML);


    //Positive Drive Through
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[3].innerHTML;
    row.appendChild(td);

    posDrive += Number(recordXmlNode.children[3].innerHTML);


    //Positive Tested Offsite
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[4].innerHTML;
    row.appendChild(td);

    posTested += Number(recordXmlNode.children[4].innerHTML);

    //Cumultive
    td = document.createElement('td');
    positives += Number(parseFloat(recordXmlNode.children[3].innerHTML) + parseFloat(recordXmlNode.children[4].innerHTML));
    tested += Number(parseFloat(recordXmlNode.children[2].innerHTML));
    cumulative = Math.floor((positives / tested) * 100) + "%";
    td.innerText = cumulative;
    row.appendChild(td);

    //Hospitalized Drive Through
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[7].innerHTML;
    row.appendChild(td);

    //Hospitalized Tested Offsite
    td = document.createElement('td');
    td.innerText = recordXmlNode.children[8].innerHTML;
    row.appendChild(td);

    tableRecords.children[1].appendChild(row);

    //  console.log(posDrive);
    //  console.log(posTested);
    console.log(testDrive);

    });//records end
});//fetch end
};//recordsTableRows end


recordsTableRows();
</script>

This is an XML Example:

    <?xml version="1.0" standalone="yes"?>
<RECORDS>
    <RECORD>
        <week>3/16-20</week>
        <appointments>6</appointments>
        <empStdsTested>2</empStdsTested>
        <empStdsPositive>0</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>4</patientsTested>
        <patientsPositive>0</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite>
        <weekNumber>1</weekNumber>
    </RECORD>
    <RECORD>
        <week>3/23-27</week>
        <appointments>9</appointments>
        <empStdsTested>5</empStdsTested>
        <empStdsPositive>1</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>4</patientsTested>
        <patientsPositive>1</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>1</empStdsPosHospitalOffsite>
        <weekNumber>2</weekNumber>
    </RECORD>
    <RECORD>
        <week>3/30-4/3</week>
        <appointments>4</appointments>
        <empStdsTested>3</empStdsTested>
        <empStdsPositive>1</empStdsPositive>
        <empStdsPosHospital>0</empStdsPosHospital>
        <patientsTested>1</patientsTested>
        <patientsPositive>1</patientsPositive>
        <empStdsPosOffsite>1</empStdsPosOffsite>
        <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite>
        <weekNumber>3</weekNumber>
    </RECORD>
</RECORDS>

Answer 1

You're using query selector already, but not to its full potential. You can use it to fetch the child elements by name, which makes your code a lot more readable and maintainable.

If you use Àrray.from() to convert the records into an array, you get access to the reduce() method. This allows you to reduce the list of XML elements into specific totals.

 const xmlString = getXMLString(); const dataDocument = (new DOMParser()).parseFromString(xmlString, 'text/xml'); // fetch records from XML and store them in an array const records = Array.from(dataDocument.querySelectorAll('RECORD')); // get the HTML elements and remove their contents const tableFootRow = document.querySelector('#record tfoot tr'); tableFootRow.textContent = ''; const tableBody = document.querySelector('#record tbody'); tableBody.textContent = ''; // iterate the records records.forEach( (record) => { // add a row const tr = tableBody.appendChild(document.createElement('tr')); // read data into variables const empStdsTested = +record.querySelector('empStdsTested')?.textContent || 0; const empStdsPositive = +record.querySelector('empStdsPositive')?.textContent || 0; const empStdsPosHospital = +record.querySelector('empStdsPosHospital')?.textContent || 0; const patientsTested = +record.querySelector('patientsTested')?.textContent || 0; const patientsPositive = +record.querySelector('patientsPositive')?.textContent || 0; const empStdsPosOffsite = +record.querySelector('empStdsPosOffsite')?.textContent || 0; const empStdsPosHospitalOffsite = +record.querySelector('empStdsPosHospitalOffsite')?.textContent || 0; tr // create and append table cell.appendChild(document.createElement('td')) // fetch and assign column specific value.textContent = record.querySelector('weekNumber')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = record.querySelector('week')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = record.querySelector('appointments')?.textContent || ''; tr.appendChild(document.createElement('td')).textContent = empStdsTested; tr.appendChild(document.createElement('td')).textContent = empStdsPositive; tr.appendChild(document.createElement('td')).textContent = empStdsPosHospital; tr.appendChild(document.createElement('td')).textContent = ((empStdsPositive + empStdsPosHospital) / empStdsTested * 100).toFixed(2) + '%'; tr.appendChild(document.createElement('td')).textContent = empStdsPosOffsite; tr.appendChild(document.createElement('td')).textContent = empStdsPosHospitalOffsite; } ); // add spacer cell for the first two columns tableFootRow.appendChild(document.createElement('td')).setAttribute('colspan', 2); // sum up appointments and add total tableFootRow.appendChild(document.createElement('td')).textContent = records.reduce( (carry, current) => carry + (+record.querySelector('appointments')?.textContent || 0), 0 ); // read totals into variables const totals = records.reduce( (carry, record) => ({ empStdsTested: carry.empStdsTested + (+record.querySelector('empStdsTested')?.textContent || 0), empStdsPositive: carry.empStdsPositive+ (+record.querySelector('empStdsPositive')?.textContent || 0), empStdsPosHospital: carry.empStdsPosHospital+ (+record.querySelector('empStdsPosHospital')?.textContent || 0), patientsTested: carry.patientsTested+ (+record.querySelector('patientsTested')?.textContent || 0), patientsPositive: carry.patientsPositive+ (+record.querySelector('patientsPositive')?.textContent || 0), empStdsPosOffsite: carry.empStdsPosOffsite+ (+record.querySelector('empStdsPosOffsite')?.textContent || 0), empStdsPosHospitalOffsite: carry.empStdsPosHospitalOffsite+ (+record.querySelector('empStdsPosHospitalOffsite')?.textContent || 0) }), { empStdsTested: 0, empStdsPositive: 0, empStdsPosHospital: 0, patientsTested: 0, patientsPositive: 0, empStdsPosOffsite: 0, empStdsPosHospitalOffsite: 0, } ); tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsTested; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPositive; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosHospital; tableFootRow.appendChild(document.createElement('td')).textContent = ((totals.empStdsPositive + totals.empStdsPosHospital) / totals.empStdsTested * 100).toFixed(2) + '%'; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosOffsite; tableFootRow.appendChild(document.createElement('td')).textContent = totals.empStdsPosHospitalOffsite; function getXMLString() { return `<?xml version="1.0" standalone="yes"?> <RECORDS> <RECORD> <week>3/16-20</week> <appointments>6</appointments> <empStdsTested>2</empStdsTested> <empStdsPositive>0</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>4</patientsTested> <patientsPositive>0</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite> <weekNumber>1</weekNumber> </RECORD> <RECORD> <week>3/23-27</week> <appointments>9</appointments> <empStdsTested>5</empStdsTested> <empStdsPositive>1</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>4</patientsTested> <patientsPositive>1</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>1</empStdsPosHospitalOffsite> <weekNumber>2</weekNumber> </RECORD> <RECORD> <week>3/30-4/3</week> <appointments>4</appointments> <empStdsTested>3</empStdsTested> <empStdsPositive>1</empStdsPositive> <empStdsPosHospital>0</empStdsPosHospital> <patientsTested>1</patientsTested> <patientsPositive>1</patientsPositive> <empStdsPosOffsite>1</empStdsPosOffsite> <empStdsPosHospitalOffsite>0</empStdsPosHospitalOffsite> <weekNumber>3</weekNumber> </RECORD> </RECORDS>`; }

 table { border-collapse: collapse; } th, td { border: 1px solid silver; padding: 4px; }

 <table id="record"> <thead> <tr> <th>Week</th> <th>Date Range</th> <th>Appointments</th> <th>Tested Drive Through</th> <th>Positive Drive Through</th> <th>Positive Tested Offsite</th> <th>Cumulative Positive Rate</th> <th>Hospitalized Drive Through</th> <th>Hospitalized Tested Offsite</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> </tr> </tfoot> </table>