Combine arrays of objects by comparing two attributes in Typescript

Suppose I have an array in TypeScript that looks like this:

const array = [
  { id_m: "123",
    period: "Q1/22",
    amount: 1000
  },
  { id_m: "123",
    period: "Q1/22",
    amount: 500
  },
  { id_m: "123",
    period: "Q2/22",
    amount: 100
  },
]

I aim to condense this array by summing up the amounts based on the properties id_m and period. The desired output should be:

const output = [
  { id_m: "123",
    period: "Q1/22",
    amount: 1500
  },
  { id_m: "123",
    period: "Q2/22",
    amount: 100
  }
]

How can I achieve this most effectively?

typescriptaggregatereduce

Answer №1

To begin, input your data. Then, utilize the reduce array method by incrementing the accumulated values with the type you have created. Here's an example:

type Data = {
  id_m: string;
  period: string;
  amount: number;
}

const array: Data[] = [
  { id_m: "123",
    period: "Q1/22",
    amount: 1000
  },
  { id_m: "123",
    period: "Q1/22",
    amount: 500
  },
  { id_m: "123",
    period: "Q2/22",
    amount: 100
  }
];

const result = array.reduce((acc: Data[], info: Data) => {
  const hasItem = acc.find((a) => a.id_m === info.id_m && a.period === info.period);
  if (hasItem) {
    const idx = acc.findIndex((a) => a.id_m === info.id_m && a.period === info.period);
    acc[idx].amount += info.amount;
  } else {
    acc.push(info);
  }

  return acc;
}, []);

console.log(result);

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

Fixing a wrong path in the problem matcher of vscode while compiling using $tsc-watch: A step-by-step

My project workspace directory can be found at C:\salix\fantasy. The TypeScript configuration file is located at C:\salix\fantasy\tsconfig.json Despite my efforts, I'm struggling to have the problem matcher for my project dir ...

typescriptvisual-studio-codevscode-problem-matcher

The initial rendering of components is not displayed by Vue Storybook

The functionality of the storybook is effective, but initially, it fails to "render" the component. By examining the screenshot, we can deduce that the component-template is being utilized in some way, as otherwise, the basic layout of the component would ...

typescriptvue.jsvuejs2storybook

NestJS Bull queues - Failing to secure job completion with a lock

I am currently utilizing Bull in combination with NestJS to manage a jobs queue. Within the process handler, I aim to designate a job as failed instead of completed. However, it appears - after carefully reviewing the documentation as well - that the Job#m ...

typescriptredisqueuenestjsbull

Are you facing difficulties while trying to utilize useContext in your React application?

I have a basic React application where I need to implement useContext. (by the way, I am using Vite + React) Below is the code for my Context.jsx file: import React, {useContext} from 'react'; const emailContext = React.createContext(); expor ...

javascriptreactjstypescriptuse-context

When I try to reverse the words in a string, I am not receiving the desired order

Currently delving into TypeScript, I have set myself the task of crafting a function that takes in a string parameter and reverses each word within the string. Here is what I aim to achieve with my output: "This is an example!" ==> "sihT ...

javascriptstringtypescriptloopsfor-loop

Toggle the visibility of the navigation bar in Angular based on the user

I have implemented rxjs BehaviorSubject in my login page to transmit data to auth.service.ts, enabling my app.component to access the data stored in auth.service.ts. However, I now require the app.component to detect any changes made to the data in auth.se ...

htmlangulartypescript

What is the best way to store a logged-in user's email in a React

I have implemented a login API and I would like to save the email of the logged-in user in the state or another variable, so that I can display it in the header after successful login. The user's email is located in the data.email. The following code ...

reactjstypescriptapireact-hooksnext.js

The http post request is functioning properly in postman, but it is not working within the ionic app

I am currently developing an app in ionic v3 within visual studio (Tools for Apache Cordova). On one of the screens in my app, I gather user information and send it to an API. However, I'm encountering an issue with the HTTP POST request that I'm ...

angulartypescripthttpionic3apache-cordova

How can I generate pure JavaScript, without using Typescript modules?

Take this scenario as an example ... index.ts import { x } from "./other-funcs"; function y() { alert("test"); } x(y); other-funcs.ts import { z } from "some-module"; export function x(callback: () => void): void { z(); callback(); } ...

javascripttypescript

Mapping an array based on its individual values

How can I sum values in an array of objects based on a specific condition? [{amount:100, prefix:'a'},{amount:50, prefix:'b'},{amount:70, prefix:'a'},{amount:100, prefix:'b'}] Is there a method to map and calculate t ...

typescript

Making the right choice: Class vs Interface in your Angular project

Today, I find myself pondering a question regarding classes and interfaces in Angular. In my opinion, here is my take on the matter: Interfaces are utilized in Typescript for type-checking purposes, existing until transpilation and disappearing in produc ...

angulartypescriptclassmodel

What is the best approach to develop a React Component Library adorned with Tailwind CSS and enable the main project to easily customize its theme settings?

Currently, I am in the process of developing an internal component library that utilizes Tailwind for styling. However, a question has arisen regarding how the consuming project can incorporate its own unique styles to these components. Although I have th ...

reactjstypescriptuser-interfacenpmtailwind-css

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

I have a specific object with key/value pairs that I need to iterate over using the entries() method of Object followed by a forEach() method of Array. However, I'm struggling to understand how to avoid a typescript error in this situation: type objTy ...

javascripttypescripttypescript-typings

Encountering the error "Missing property '$$typeof' when trying to extend next/link in Next.js using TypeScript"

I have the following code snippet in my project: import NextLink from 'next/link' import ExternalLink from './External' type PropsType = typeof NextLink & { href: string children: React.ReactNode } export default function Link ...

reactjstypescriptnext.js

"Utilizing the `useState` function within a `Pressable

Experiencing some unusual behavior that I can't quite figure out. I have a basic form with a submit button, and as I type into the input boxes, I can see the state updating correctly. However, when I click the button, it seems to come out as reset. Th ...

reactjstypescriptreact-nativeexpo

How can I make TypeScript properly export function names for closure-compiler?

Here is the TypeScript code I am working with: namespace CompanyName.HtmlTools.Cookie { export function eraseCookie(name:string, path:string) { createCookie(name, "", path, -1); } export function readCookie(name:string) { ...

javascripttypescriptminifygoogle-closure-compiler

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

javascriptreactjstypescripttypes

What is the best approach to perform type checking on a function that yields varying types depending on the values of its

Currently, I am facing a challenge with a function that takes an argument and returns a different type of value depending on the argument's value. For instance: function foo(arg: 'a' | 'b') { if (arg === 'a') { ret ...

typescript

Nuxt - It is not possible to use useContext() within a watch() callback

I'm currently utilizing version 0.33.1 of @nuxtjs/composition-api along with Nuxt 2. Here's a snippet from my component: import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api'; export default defineCompo ...

typescriptvue.jsnuxt.jsvue-composition-api

Could you explain the distinction between npm install and sudo npm install?

I recently switched to using linux. To install typescript, I ran the following command: npm i typescript Although there were no errors during the installation process, when I checked the version by typing tsc --version, I encountered the error message -bas ...

linuxtypescriptubuntunpmsudo