Summing up similar values of elements in an array (JavaScript) using Angular

Question

Summing up similar values of elements in an array (JavaScript) using Angular

My Current Tools

Angular 5
AngularFire5
Firebase & Firestore

My Goal

I aim to iterate through an array containing objects. If a specific value in one object matches the same value in another object, I want to add their corresponding values together.

For Example:

Starting Data:

mapData = [{"countryCode":"US", "clicks": 5}, {"countryCode":"CAN", "clicks": 9}, {"countryCode":"US", "clicks": 6}]

or

mapData = [["US", 5], ["CAN", 9], ["US", 6]]

Desired Output:

mapDataResults = {
    "US": {
        "usage": 11,
        "fillKey": "tens"
    },
    "CAN": {
        "usage": 9,
        "fillKey": "ones"
    },
}

Where I Need Assistance

I am unsure how to efficiently search and match object values within the array. Additionally, I need help reformatting the data from an array to JSON format. Lastly, I would like to add a new key "fillKey" based on the number of clicks (or usage) for each country, which I believe I can do once the other steps are resolved.

javascript angular typescript firebase google-cloud-firestore

Answer 1

Answer №1

If your initial collection is an array containing other arrays:

let dataEntries = [["USA", 8], ["MEX", 12], ["CAN", 7]];

function getLeadingDigitName(number) {
    switch(Math.floor(number).toString().length) {
        case 1: return 'units';
        case 2: return 'tens';
    }
}

function combineAndOutput(arr) {
    let finalResult = {};
    for(let j=0;j<arr.length;j++) {
        let mainKey = arr[j][0];
        let mainVal = arr[j][1];
        if(finalResult[mainKey]) {//already exists, so update
            finalResult[mainKey].total += mainVal;
        }
        else {//doesn't exist yet, so add 
            finalResult[mainKey] = { total: mainVal };
        }
        finalResult[mainKey].category = getLeadingDigitName(finalResult[mainKey].total);
    }
    return finalResult;
}

combineAndOutput(dataEntries);

Answer 2

If your initial collection is an array containing other arrays:

let dataEntries = [["USA", 8], ["MEX", 12], ["CAN", 7]];

function getLeadingDigitName(number) {
    switch(Math.floor(number).toString().length) {
        case 1: return 'units';
        case 2: return 'tens';
    }
}

function combineAndOutput(arr) {
    let finalResult = {};
    for(let j=0;j<arr.length;j++) {
        let mainKey = arr[j][0];
        let mainVal = arr[j][1];
        if(finalResult[mainKey]) {//already exists, so update
            finalResult[mainKey].total += mainVal;
        }
        else {//doesn't exist yet, so add 
            finalResult[mainKey] = { total: mainVal };
        }
        finalResult[mainKey].category = getLeadingDigitName(finalResult[mainKey].total);
    }
    return finalResult;
}

combineAndOutput(dataEntries);

Answer 3

Answer №2

If you are familiar with using lodash library, you may find the following code snippet helpful:

data = [{"UK", 4}, {"AUS", 8},{"UK", 7}];

You can then use _.sumBy(data, 'UK') or _.sumBy(data, "AUS")

All that is required is to map the response to an object. The provided instructions outline how to calculate and add the sum if additional data related to "UK" or "AUS" exists within the data array.

Answer 4

If you are familiar with using lodash library, you may find the following code snippet helpful:

data = [{"UK", 4}, {"AUS", 8},{"UK", 7}];

You can then use _.sumBy(data, 'UK') or _.sumBy(data, "AUS")

All that is required is to map the response to an object. The provided instructions outline how to calculate and add the sum if additional data related to "UK" or "AUS" exists within the data array.

Summing up similar values of elements in an array (JavaScript) using Angular

My Current Tools

My Goal

Where I Need Assistance

Answer №1

Answer №2

Similar questions

What is the best way to dynamically update cells within an HTML table row when a single column is changed?

Adding a SpotLight to Camera in ThreeJS: A Step-by-Step Guide

Displaying empty values in the post via plupload data

Include a description in the cell of the table

Nodemon causing crashes in basic HTML pages

Is it truly possible to return a reactive variable that updates its value asynchronously?

The type entity i20.CdkScrollableModule cannot be resolved to symbol in the nx workspace

Tips for addressing lag problems in my Three.js game as time progresses

Tips for effectively utilizing v-if, v-else within a v-for loop in your Vuejs application

What is the best approach to choose the thead element from a dynamically created table?

Tips for effectively utilizing node modules that have yet to be installed without encountering any errors

When the state changes in React, the useSelector hook does not provide real-time updates

Creating random numbers in HTML using JavaScript

Which symbol is preferable to use in JS imports for Vue.js/Nuxt.js - the @ symbol or the ~ symbol?

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Encountering some problems while trying to use {return this.getAll.get(this.url)} to consume an API within Angular

The GetStaticProps function in Nextjs is failing to load properly and is not passing the props data to

Leveraging flot in conjunction with NPM, React, and Node

Incorporate animated SVG directly into Vue templates without using any additional enclosures

Detect a modification event on a field lacking an ID using jQuery