Combining similar property objects within a group

I am facing a similar object structure with the goal of summing up the same property grouped by year (e.g., 2016 --> importo1: 7500, importo2: 0, importo3: 0, importo4: 3000)

{
  index: 0,
  annoDelibera: 2020,
  importo1: 2500,
  importo2: 3000,
  importo3: 0,
  importo4: 2000
},
{
  index: 1,
  annoDelibera: 2019,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 2,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 3,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 4,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 5,
  annoDelibera: 2015,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 6,
  annoDelibera: 2014,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 7,
  annoDelibera: 2014,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
}

How can I achieve this? My issue is that when I try to sum, it sums all the properties by year and not the individual properties.

getSumGrouped(year) {
    let holder = {};
    let sum = 0;
    for (let entry of this.config.fields) {
         for (let row of this.data) {
              if (holder.hasOwnProperty(row.annoDelibera) && holder.hasOwnProperty(entry.name)) {
                if(year == row.annoDelibera){
                  sum += Number(row[entry.name]);
                  holder[row.annoDelibera] = holder[row.annoDelibera] + sum;
                }

              } 
              else {
                if(year == row.annoDelibera){
                  sum += Number(row[entry.name]);
                  holder[row.annoDelibera] = sum;
                }
              }

            }
        fields.push({ style: { ...entry.style, ...entry.cellStyle }, value: holder[year] });
    }
}

I attempted it in this manner, where this.config.fields provides me with the same name property but from another source. And this.data represents the object structure data mentioned above.

javascripttypescript

Answer №1

If I were to tackle this problem, I would take a step-by-step approach:

const yearSum = yourObject.reduce((accumulator, object) => {
  // Check if we have an index, then perform addition or set current object as value
  if (accumulator[object.annoDelibera]) {
    accumulator[object.annoDelibera].importo1 += object.importo1;
    accumulator[object.annoDelibera].importo2 += object.importo2
    accumulator[object.annoDelibera].importo3 += object.importo3
    accumulator[object.annoDelibera].importo4 += object.importo4
  } else {
    // Extract index and year from values, omitting them can be messy for the total
    const {index, annoDelibera, ...rest} = object;
    accumulator[object.annoDelibera] = rest;
  }
  return accumulator; // Return for the next reduce loop
}, {});

In the reduce function, there are various possibilities. The 4 lines setting importo1 could be modified to allow any key, utilizing the deconstruction pattern from the else statement to avoid summing up years and index if looping over keys.

Another Approach

const yearSum = yourObject.reduce((accumulator, object) => {
    // Extract index and year from values, omitting them can be messy for the total
  const {index, annoDelibera, ...rest} = object;
  // Check if we have an index, then perform addition or set current object as value
  if (accumulator[object.annoDelibera]) {
    Object.keys(rest).forEach(key => {
      accumulator[object.annoDelibera][key] += rest[key];
    }
  } else {
    accumulator[object.annoDelibera] = rest;
  }
  return accumulator; // Return for the next reduce loop
}, {});

The second approach is more flexible, but may not be necessary depending on the requirements. Using clearer variable names would be beneficial, but without knowledge of your object, it's challenging to suggest specific improvements!

Answer №2

To achieve the desired outcome, one can search for the same year and either create a new object with updated properties or update the existing ones accordingly.

var data = [{ index: 0, annoDelibera: 2020, importo1: 2500, importo2: 3000, importo3: 0, importo4: 2000 }, { index: 1, annoDelibera: 2019, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 2, annoDelibera: 2016, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 3, annoDelibera: 2016, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 4, annoDelibera: 2016, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 5, annoDelibera: 2015, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 6, annoDelibera: 2014, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }, { index: 7, annoDelibera: 2014, importo1: 2500, importo2: 0, importo3: 0, importo4: 1000 }], grouped = data.reduce((r, { index, annoDelibera, ...o }) => {
    var temp = r.find(q => q.annoDelibera === annoDelibera);
    if (temp) Object.entries(o).forEach(([k, v]) => temp[k] += v);
    else r.push(temp = { annoDelibera, ...o });
    return r;
}, []);

console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer №3

Implement the underscore library function:

_.groupBy

then proceed to calculate the total of items in each group. Let me know if you encounter any issues.

Answer №4

This solution may not be the most elegant, but it fulfills your requirements without relying on any extra libraries. 

let data = [
{
  index: 0,
  annoDelibera: 2020,
  importo1: 2500,
  importo2: 3000,
  importo3: 0,
  importo4: 2000
},
{
  index: 1,
  annoDelibera: 2019,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 2,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 3,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 4,
  annoDelibera: 2016,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 5,
  annoDelibera: 2015,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 6,
  annoDelibera: 2014,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
},
{
  index: 7,
  annoDelibera: 2014,
  importo1: 2500,
  importo2: 0,
  importo3: 0,
  importo4: 1000
}
]

let byYear = {};

data.forEach(el => {
if(!byYear[el.annoDelibera]) {
  byYear[el.annoDelibera]= {
    importo1: 0,
      importo2: 0,
      importo3: 0,
      importo4: 0
    };
  }
})

data.forEach(el => {
byYear[el.annoDelibera].importo1 += el.importo1;
byYear[el.annoDelibera].importo2 += el.importo2;
byYear[el.annoDelibera].importo3 += el.importo3;
byYear[el.annoDelibera].importo4 += el.importo4;
})

console.log(byYear);

Answer №5

give this a shot

const info = [ { id: 1, year: 2020, amount1: 2500, amount2: 3000, amount3: 0, amount4: 2000 }, { id: 2, year: 2019, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 3, year: 2016, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 4, year: 2016, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 5, year: 2016, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 6, year: 2015, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 7, year: 2014, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 }, { id: 8, year: 2014, amount1: 2500, amount2: 0, amount3: 0, amount4: 1000 } ]

const outcome = info.reduce(function(response, item) {
    if (!(item.year in response)){
        const { id, year, ...result } = item;
        response.array.push(response[item.year] = result);
    }
    else {
        response[item.year].amount1 += item.amount1;
        response[item.year].amount2 += item.amount2;
        response[item.year].amount3 += item.amount3;
        response[item.year].amount4 += item.amount4;
    }
    return response;
}, {array:[]})

console.log(outcome)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to run a web game on the same URL?

While working on quickly prototyping my ideas, I have been utilizing Express with Mongo and have successfully implemented a mongostore cookie storage system. Here's what I'm wondering: Can I keep everything happening on one page, specifically &a ...

javascriptnode.jsexpressurl-routing

Iterate through the list retrieved from the backend

I have a list coming from the backend that I need to iterate through and hide a button if any element in the list does not have a status of 6. feedback The response returned can vary in length, not always just one item like this example with 7 elements. ...

javascriptreactjsreact-native

EJS functionality is operational, however, the HTML content is not displaying

I'm currently developing a timer using Express.js and EJS. My goal is to update the HTML dynamically, but I seem to be encountering an issue where nothing gets displayed. Strangely enough, I can see the output in my CLI with console.log. <div id ...

javascriptnode.jsexpressejs

The issue of unreadable URLs on the server side caused by a Javascript Ajax problem

I have successfully implemented code to send information from a website to a server. The code I used is as follows: <!DOCTYPE html> <html> <script> var Network = {"name":"", "password":""} var json ...

javascriptajaxesp8266

What is the best way to initiate an event using the onMousewheel function?

I am currently working on a WebGL application where I have a sphere object that utilizes orbit controls for zooming in and out. My goal is to set up an event for the mousewheel so that when I zoom on the WebGL block, the corresponding map location also zo ...

javascriptthree.jsmousewheel

Issue with decodeURI function causing hyperlinks to display as plain text

I have been developing a Sharepoint App that includes a feature to extract contact details from a list on the Sharepoint site. Below is a snippet of my code: var currentOpeningContent = '<h4 onclick="ShowJobDetail(\'' + encodeURI(cu ...

javascriptsharepointdecodeuricomponent

The drag-and-drop application failed to upload a video using Ajax

I am currently working on an application that allows users to upload files to a server with a drag and drop function. The app is functioning well for images, but occasionally encounters issues when trying to upload videos. I'm not certain if there&apo ...

javascriptphpajax

Ways to reach state / methods outside of a React component

Implementing the strategy design pattern to dynamically change how mouse events are handled in a react component is my current task. Here's what my component looks like: class PathfindingVisualizer extends React.Component { constructor(props) { ...

javascriptreactjs

Using jQuery to replace an HTML element multiple times

Seeking assistance for implementing functionality that replaces a button with an input field, where users can enter information and hit enter. Once the action is completed, the original button should reappear. The current script works effectively but lacks ...

javascriptjqueryhtmlreplace

`How can I activate a modal window when an option is chosen?`

Utilize the select tag and modal window tag for this example. <select id="selectBox"> <option value="0">Select</option> <option value="1">Yes</option> <option value="2">No</option> </select> <div id ...

javascriptphpjqueryhtml

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Dilemma of interdependencies between Socket.io and requirejs

I am facing a challenge with my legacy express project that has two servers. The project includes two separate client files: requirejs.config({ baseUrl: '/js' , paths: { "jquery": "lib/jquery/jquery-2.1.1.min", "socket.io" : "lib/socket/ ...

javascriptnode.jssocket.iorequirejsace-editor

What is the best way to restructure this deeply nested JSON information?

I'm working with the payload structure of my API and I want to format the data in a way that allows for dynamic display on the frontend without hardcoding column names. Currently, I am using DRF, axios, and react-redux, but I feel like I may need to d ...

javascriptreactjsdjango-rest-frameworkjsonfield

AngularJS custom directive with isolated scope and controller binding

I am looking to create a directive that includes both scope parameters and ng-controller. Here is the desired structure for this directive: <csm-dir name="scopeParam" ng-controller="RegisteredController"> <!-- Content goes here--> {{na ...

javascriptangularjsangular-directiveng-controller

Access the extended controller and call the core controller function without directly interacting with the core controller

i have a core controller that contains an array called vm.validationTypes with only 2 objects. I need to add 3 or 4 more objects to this array. to achieve this, i created another controller by extending the core controller: // CustomValidation angular.m ...

javascriptjqueryangularjsangularjs-scope

Service failure occurs due to the inability to inject a factory

I've been working on an angular seed project that includes services and a factory. Specifically, my companyService relies on a factory named company. However, I've encountered an issue when trying to inject company into companyService, resulting ...

javascriptangularjsdependency-injection

Updating data on the next page with the ID from the previous page in Ionic

In my Ionic application with a SQLite database, I need to transfer data from the "Data Form" page to the "Add More Info" page using the same ID. This data needs to be loaded on the "Add More Info" page before any controller is executed. Once on the "Add Mo ...

javascriptangularjssqliteionic-framework

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

I currently have a form set up that is functioning properly, but I am looking to make some changes. Instead of redirecting the user to a new page with a success message upon submitting the form, I want the success message to be displayed in a div next to t ...

javascriptjqueryhtmlformsconditional-statements

Sharing environment variables in gulpfile with other JavaScript files outside NODE_ENV

Is it possible to pass a variable other than NODE_ENV from the gulpfile.js to another javascript file? gulpfile.js // Not related to NODE_ENV! let isDevelopment = true; somejsfile.js /* I need to access "isDevelopment" from the gulpfile.js... For the ...

javascriptnode.jsgulp

Executing a Python function using Javascript

I've been attempting to invoke a basic Python method using JavaScript, but unfortunately, I've hit a roadblock. Below is the Python code snippet I'm working with: def main(): return "Hello from Python" And here is the JavaScript code s ...

javascriptpythonajax