Analyze the individuals listed in one column of the table and calculate the total from the adjacent column using JavaScript

Question

Analyze the individuals listed in one column of the table and calculate the total from the adjacent column using JavaScript

I have a table with participant data that I would like to compare. If a participant has multiple result points in the table, I want a script to calculate the sum of all their results. This process should be repeated for each participant listed in the table. The table is generated from a database field which includes columns for Participant, Station, and Points:

aa  Some1   1
dd  Some1   2
aa  sm2    3
dd  sm2    4
bb  sm3    5
ee  sm3    6

For example, I need to create a new table with the summed results per participant:

aa - 4,
dd - 6,
bb - 5,
ee - 6

I've attempted to achieve this with the following code snippet:

$(document).ready(function () {
    $("body").click(function () {

        var rows = $("tbody tr");
        var jo = [];

        for (var i = 0; i < rows.length; i++) {

            for (var j = 1; j <= rows.length; j++) {

                var pnt1 = $(rows[i]).find(".pnt").html();
                var stations1 = $(rows[i]).find(".station").html();
                var res1 = $(rows[i]).find(".res").html();

                if (pnt1 == $(rows[j]).find(".pnt").html()) {
                    res1 = parseInt(res1);
                    res2 = parseInt($(rows[j]).find(".res").html());
                    jo.push(pnt1, res1, res2);
                    break;
                }

            }

        }

        console.log(jo);

    });
});

However, it seems I may be going about this the wrong way. Any assistance or guidance on solving this issue would be greatly appreciated.

Updated section based on comments:

<table id="pntsRes">
<thead>
<tr>
    <th>Participants</th>
    <th>Points</th>
</tr>
</thead>
<tbody>
<tr><td class="pnt">aa</td><td class="station">AES</td><td class="res">1</td></tr><tr><td class="pnt">dd</td><td class="station">AES</td><td class="res">2</td></tr>
<tr><td class="pnt">aa</td><td class="station">Science</td><td class="res">3</td></tr>
<tr><td class="pnt">dd</td><td class="station">Science</td><td class="res">4</td></tr><tr><td class="pnt">bb</td><td class="station">Airport</td><td class="res">5</td></tr>
<tr><td class="pnt">ee</td><td class="station">Airport</td><td class="res">6</td></tr></tbody>
</table>

javascript arrays compare

Answer 1

Answer №1

In order to enhance the maintainability of your code, a suggested approach would be to break down your solution into three separate functions. The first function could focus on extracting data from the HTML, although this practice is somewhat questionable. The second function could then handle transforming the extracted data, and the final function could deal with outputting the new table.

function extractData() {
    var rows = $("tbody tr");
    var data = [];
    rows.each(function(index, row) {
        var point = $(row).find('.point').html();
        var station = $(row).find('.station').html();
        var result = parseInt($(row).find('.result').html());
        data.push([point, station, result]);
    });
}

For the transformation process, you could consider utilizing a method similar to the one outlined below:

// Utilize the output from extractData() for further processing
function processData(data) {
    var groupedKeys = {};
    var transformedData = data.map(function(datum) {
        var name = datum[0];
        var value = datum[2];
        groupedKeys[name] = (groupedKeys[name] || 0) + (value || 0);
    });

    var formattedData = [];
    Object.keys(groupedKeys).forEach(function(key) {
        formattedData.push([key, groupedKeys[key]]);
    });

    return formattedData;
}

The implementation of the final function would be left to your discretion, offering opportunities for improvement. Nevertheless, these suggestions may serve as a solid foundation for enhancements in your code structure.

Answer 2

In order to enhance the maintainability of your code, a suggested approach would be to break down your solution into three separate functions. The first function could focus on extracting data from the HTML, although this practice is somewhat questionable. The second function could then handle transforming the extracted data, and the final function could deal with outputting the new table.

function extractData() {
    var rows = $("tbody tr");
    var data = [];
    rows.each(function(index, row) {
        var point = $(row).find('.point').html();
        var station = $(row).find('.station').html();
        var result = parseInt($(row).find('.result').html());
        data.push([point, station, result]);
    });
}

For the transformation process, you could consider utilizing a method similar to the one outlined below:

// Utilize the output from extractData() for further processing
function processData(data) {
    var groupedKeys = {};
    var transformedData = data.map(function(datum) {
        var name = datum[0];
        var value = datum[2];
        groupedKeys[name] = (groupedKeys[name] || 0) + (value || 0);
    });

    var formattedData = [];
    Object.keys(groupedKeys).forEach(function(key) {
        formattedData.push([key, groupedKeys[key]]);
    });

    return formattedData;
}

The implementation of the final function would be left to your discretion, offering opportunities for improvement. Nevertheless, these suggestions may serve as a solid foundation for enhancements in your code structure.

Answer 3

Answer №2

To solve this problem, I utilized an associative array, which is essentially an object in JavaScript. Here is the modified code snippet:

http://jsfiddle.net/a5k6w300/

Key Changes:

var jo = [];

was replaced with an object instead of an array as shown below:

var jo = {};

Additionally, I included the 'if(isNaN(object[key])' condition inside the inner loop to ensure that the values did not turn into NaN during summation.

$(document).ready(function () {
    $("body").click(function () {

        var rows = $("tbody tr");
        var jo = {};
console.log(rows);
        for (var i = 0; i < rows.length; i++) {

            for (var j = 1; j <= rows.length; j++) {

                var pnt1 = $(rows[i]).find(".pnt").html();
                var stations1 = $(rows[i]).find(".station").html();
                var pntR1 = $(rows[i]).find(".res").html();
                if (pnt1 == $(rows[j]).find(".pnt").html()) {
                    pntR1 = parseInt(pntR1);
                    pntR2 = parseInt($(rows[j]).find(".res").html());
                    if(isNaN(jo[pnt1])){
                        jo[pnt1] = 0;
                    }
                    jo[pnt1] += pntR1;
                    break;
                }

            }

        }
        console.log(jo);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pntsRes">
    <thead>
        <tr>
            <th>Participants</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">AES</td>
            <td class="res">1</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">AES</td>
            <td class="res">2</td>
        </tr>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">Science</td>
            <td class="res">3</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">Science</td>
            <td class="res">4</td>
        </tr>
        <tr>
            <td class="pnt">bb</td>
            <td class="station">Airport</td>
            <td class="res">5</td>
        </tr>
        <tr>
            <td class="pnt">ee</td>
            <td class="station">Aerodrome</td>
            <td class="res">6</td>
        </tr>
    </tbody>
</table>

Answer 4

To solve this problem, I utilized an associative array, which is essentially an object in JavaScript. Here is the modified code snippet:

http://jsfiddle.net/a5k6w300/

Key Changes:

var jo = [];

was replaced with an object instead of an array as shown below:

var jo = {};

Additionally, I included the 'if(isNaN(object[key])' condition inside the inner loop to ensure that the values did not turn into NaN during summation.

$(document).ready(function () {
    $("body").click(function () {

        var rows = $("tbody tr");
        var jo = {};
console.log(rows);
        for (var i = 0; i < rows.length; i++) {

            for (var j = 1; j <= rows.length; j++) {

                var pnt1 = $(rows[i]).find(".pnt").html();
                var stations1 = $(rows[i]).find(".station").html();
                var pntR1 = $(rows[i]).find(".res").html();
                if (pnt1 == $(rows[j]).find(".pnt").html()) {
                    pntR1 = parseInt(pntR1);
                    pntR2 = parseInt($(rows[j]).find(".res").html());
                    if(isNaN(jo[pnt1])){
                        jo[pnt1] = 0;
                    }
                    jo[pnt1] += pntR1;
                    break;
                }

            }

        }
        console.log(jo);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pntsRes">
    <thead>
        <tr>
            <th>Participants</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">AES</td>
            <td class="res">1</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">AES</td>
            <td class="res">2</td>
        </tr>
        <tr>
            <td class="pnt">aa</td>
            <td class="station">Science</td>
            <td class="res">3</td>
        </tr>
        <tr>
            <td class="pnt">dd</td>
            <td class="station">Science</td>
            <td class="res">4</td>
        </tr>
        <tr>
            <td class="pnt">bb</td>
            <td class="station">Airport</td>
            <td class="res">5</td>
        </tr>
        <tr>
            <td class="pnt">ee</td>
            <td class="station">Aerodrome</td>
            <td class="res">6</td>
        </tr>
    </tbody>
</table>

Analyze the individuals listed in one column of the table and calculate the total from the adjacent column using JavaScript

Answer №1

Answer №2

Similar questions

Combining associative arrays by utilizing a mapping array along with an array containing partial keys (providing support for named parameters)

Having trouble receiving values sent through AJAX POST requests to PHP

What is the best way to trigger a controller action when the datepicker's value changes?

I need help figuring out the proper way to establish an indexing path in cosmos db using the nodejs sdk

Creating a tree array in JavaScript from JSON data

Creating a Multidimensional Dynamic Array: A Step-by-Step Guide

Activate the ajax function using a specific reference

Sending information to a Flask application using AJAX

Error in test runner: Cannot convert type 'Cucumber' to type '? extends Runner' in Java cucumber

Deleting query strings from the URL - HashRouter

Filter through the array of objects using the title key

Using React Higher Order Components to transmit data attributes to the initial child/element within the encapsulated component

Update the specific component according to the identified modifications

PHP-generated AngularJs Select Element

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

Understanding the Fundamentals of Arrays

Restrict the Angular ng-repeat directive to specific rows only

Having trouble accessing variable values within the nth-child selector in JavaScript

Access the current slide number with the slideNumber feature in Reveal.js

What is the best way to display the shape value of a tensor?