Utilize GroupBy and tally up items within an array using typescript

Question

Utilize GroupBy and tally up items within an array using typescript

Here is a representation of my array, which is not a type of string but its own object called MyObject (similar to setter and getter objects in Java)

["Car","model","year","color","price"]
["Table","model","year","color","price"]
["Car","model","year","color","price"]
["Car","model","year","color","price"]
["Laptop","model","year","color","price"]
["Laptop","model","year","color","price"]

I am looking to group this data in TypeScript and count the occurrences of each item in the array (similar to how it's done in SQL)

name  |count
 Car  | 3
Laptop| 2
Table | 1

In my TypeScript file, I have the following code:

private groupByObjects() {
  //this reads all data in the 'allData[]' array from the service
  this.dataService.retrieveData().subscribe(allData => {

});

}

Can anyone assist me in writing this logic in TypeScript?

angular typescript

Answer 1

Answer №1

After numerous attempts, I was finally able to come up with a solution that works perfectly for me. I am sharing it now in the hopes that it will be helpful to anyone facing a similar issue.

function groupByElement(receivedData: ReceivedData, elements: Array<GroupByElement>) {
    let groupElement: GroupByElement = new GroupByElement;

    if (!elements.find(x => x.element== receivedData.element)) {
      groupElement.element= receivedData.element;
      groupElement.count = 1;
      elements.push(groupElement);
    } else {
      this.updateElementCounter = elements.find(x => x.element== receivedData.element)?.count;
      this.updateElementCounter! += 1;
      this.indexElementCount = elements.findIndex(x => x.element== receivedData.element);

      elements[this.indexElementCount].count = this.updateElementCounter!;
    }
  }

Answer 2

After numerous attempts, I was finally able to come up with a solution that works perfectly for me. I am sharing it now in the hopes that it will be helpful to anyone facing a similar issue.

function groupByElement(receivedData: ReceivedData, elements: Array<GroupByElement>) {
    let groupElement: GroupByElement = new GroupByElement;

    if (!elements.find(x => x.element== receivedData.element)) {
      groupElement.element= receivedData.element;
      groupElement.count = 1;
      elements.push(groupElement);
    } else {
      this.updateElementCounter = elements.find(x => x.element== receivedData.element)?.count;
      this.updateElementCounter! += 1;
      this.indexElementCount = elements.findIndex(x => x.element== receivedData.element);

      elements[this.indexElementCount].count = this.updateElementCounter!;
    }
  }

Answer 3

Answer №2

Why not give lodash a try?

You can achieve this functionality with just 2 simple lines of code:

private groupByObjects() {
  // This method retrieves data from the service and processes it
  this.dataService.retrieveData().subscribe(allData => {
    const counts = _.countBy(allData, '[0]');
    const data = _.unionBy(allData, '[0]');
    console.log(counts, data);
  });

Don't forget to install and import lodash:

npm install -s lodash

import * as _ from 'lodash';

Answer 4

Why not give lodash a try?

You can achieve this functionality with just 2 simple lines of code:

private groupByObjects() {
  // This method retrieves data from the service and processes it
  this.dataService.retrieveData().subscribe(allData => {
    const counts = _.countBy(allData, '[0]');
    const data = _.unionBy(allData, '[0]');
    console.log(counts, data);
  });

Don't forget to install and import lodash:

npm install -s lodash

import * as _ from 'lodash';

Answer 5

Answer №3

I really appreciate the concept of a list reducer that utilizes a function returning another function. This allows for flexibility in specifying which key to use, as demonstrated with the key being set to 0 in this case.

interface PropObject {
  [index: string]: number;
}

const groupByCounter = (key : number) => (result : PropObject ,current : string []) => {

  result[current[key]] = result[current[key]] ? result[current[key]] + 1 : 1;
  return result;
};

const data : string [][] = [["Car","model","year","color","price"],
["Table","model","year","color","price"],
["Car","model","year","color","price"],
["Car","model","year","color","price"],
["Laptop","model","year","color","price"],
["Laptop","model","year","color","price"]];

const group = data.reduce(groupByCounter(0),{});
console.log(group);

Link to typescript playground.

Check out the javascript version

Answer 6

I really appreciate the concept of a list reducer that utilizes a function returning another function. This allows for flexibility in specifying which key to use, as demonstrated with the key being set to 0 in this case.

interface PropObject {
  [index: string]: number;
}

const groupByCounter = (key : number) => (result : PropObject ,current : string []) => {

  result[current[key]] = result[current[key]] ? result[current[key]] + 1 : 1;
  return result;
};

const data : string [][] = [["Car","model","year","color","price"],
["Table","model","year","color","price"],
["Car","model","year","color","price"],
["Car","model","year","color","price"],
["Laptop","model","year","color","price"],
["Laptop","model","year","color","price"]];

const group = data.reduce(groupByCounter(0),{});
console.log(group);

Link to typescript playground.

Check out the javascript version

Answer 7

Answer №4

You have the ability to achieve this with a time complexity of O(n) using a straightforward reduction

In your specific scenario,

type ApplyFunction<X, T, R> = (all: X, current: T) => R
type GetFunction<T,R> = (t: T) => R

const groupAndApplyByIndex = <T, V extends string | number, R>(data: Array<T>, get: GetFunction<T,V>, apply: ApplyFunction<Record<V, R>, V, R>) => {
  return data.reduce((all, element) => {
    return {
      ...all,
      [get(element)]: apply(all, get(element))
    }
  }, {} as Record<V, R>)
}

You can utilize the above function in your code by simply

private groupByObjects() {
  //this read all data in array allData[] from service
  this.dataService.retrieveData().subscribe(allData => {

    const getX: GetFunction<string[], string> = (t) => t[0]
    const counts = groupAndApplyByIndex(allData, getX, (all, element) => ((all[element] as number || 0) + 1))

    // Implement the rest of your logic here...
  });

Through the use of the method outlined above, you possess a function that is capable of performing tasks such as counting or executing other transformations specified within the apply function

TypeScript Playground

Answer 8

You have the ability to achieve this with a time complexity of O(n) using a straightforward reduction

In your specific scenario,

type ApplyFunction<X, T, R> = (all: X, current: T) => R
type GetFunction<T,R> = (t: T) => R

const groupAndApplyByIndex = <T, V extends string | number, R>(data: Array<T>, get: GetFunction<T,V>, apply: ApplyFunction<Record<V, R>, V, R>) => {
  return data.reduce((all, element) => {
    return {
      ...all,
      [get(element)]: apply(all, get(element))
    }
  }, {} as Record<V, R>)
}

You can utilize the above function in your code by simply

private groupByObjects() {
  //this read all data in array allData[] from service
  this.dataService.retrieveData().subscribe(allData => {

    const getX: GetFunction<string[], string> = (t) => t[0]
    const counts = groupAndApplyByIndex(allData, getX, (all, element) => ((all[element] as number || 0) + 1))

    // Implement the rest of your logic here...
  });

Through the use of the method outlined above, you possess a function that is capable of performing tasks such as counting or executing other transformations specified within the apply function

TypeScript Playground

Answer 9

Answer №5

If you're already utilizing rxjs, my suggestion is to stick with it. While I can't guarantee this is the optimal solution and recommend debugging, I personally find this approach enjoyable.

type Item = [string, string, string, string, string]; // consider refining this type definition
type ItemCount = [string, number];

const source$: Observable<Item[]> = of([
  ["Car","model","year","color","price"],
  ["Table","model","year","color","price"],
  ["Car","model","year","color","price"],
  ["Car","model","year","color","price"],
  ["Laptop","model","year","color","price"],
  ["Laptop","model","year","color","price"]
]); // mock data obtained from this.dataService.retrieveData()

source$.pipe(
  mergeMap(res => from(res)), // emit each item individually
  groupBy((item: Item) => item[0]),
  mergeMap((item$: GroupedObservable<Item>) => item$.pipe( 
    count(), // wait for completion, then emit count
    map<number, ItemCount>(c => [item$.key, c]) // convert count into a tuple of [key, count]
  )),
  toArray(), // Wait until all items have been processed, then emit the final ItemCount[]
  map((itemCounts: ItemCount[]) => new Map<string, number>(itemCounts)) // alternatively, use Object.fromEntries(itemCounts)
).subscribe(mapOfCountsPerKey => {
    // implement your desired logic here
});

Answer 10

If you're already utilizing rxjs, my suggestion is to stick with it. While I can't guarantee this is the optimal solution and recommend debugging, I personally find this approach enjoyable.

type Item = [string, string, string, string, string]; // consider refining this type definition
type ItemCount = [string, number];

const source$: Observable<Item[]> = of([
  ["Car","model","year","color","price"],
  ["Table","model","year","color","price"],
  ["Car","model","year","color","price"],
  ["Car","model","year","color","price"],
  ["Laptop","model","year","color","price"],
  ["Laptop","model","year","color","price"]
]); // mock data obtained from this.dataService.retrieveData()

source$.pipe(
  mergeMap(res => from(res)), // emit each item individually
  groupBy((item: Item) => item[0]),
  mergeMap((item$: GroupedObservable<Item>) => item$.pipe( 
    count(), // wait for completion, then emit count
    map<number, ItemCount>(c => [item$.key, c]) // convert count into a tuple of [key, count]
  )),
  toArray(), // Wait until all items have been processed, then emit the final ItemCount[]
  map((itemCounts: ItemCount[]) => new Map<string, number>(itemCounts)) // alternatively, use Object.fromEntries(itemCounts)
).subscribe(mapOfCountsPerKey => {
    // implement your desired logic here
});

Utilize GroupBy and tally up items within an array using typescript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Navigating a SwipeableDrawer in React with scrolling functionality

Creating a conditional class property requirement in TypeScriptAnother way to implement conditionally required class

When using Router.push() in next.js, the error TypeError: products.map is not a function may arise

Adjusting icons based on the length of the text

Revamp Your Service Naming and Nickname with Swagger Codegen IO

Typescript - Defining string value interfaces

Require type parameter to be of enum type

What is the best way to arrange an array of objects in a descending order in Angular?

Is there an issue with this return statement?

"Unexpected Alignment Issue with NZ Zorro's Dynamic Columns Feature in the Ant Design NZ-Table Component

Obtaining a value from within an Angular 'then' block

Why are mustaches not functioning as expected in Vue SFC defined by Vite?

Executing a Prisma query with a selection

Dynamic URL in Angular service for JSON API request

Failure of React to connect event handlers

A mistake occurred during the afterAll function, resulting in a TypeError: Unable to access properties of an undefined entity (specifically, trying to read '

How can I indicate separate paths for the identical dependencies listed in package.json?

Angular Route seems unreachable

Using NGXS in combination with Firestore or Firebase Authentication

How can I utilize a variable as the value for ngClass in Angular 2?