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

Having trouble displaying nested routes in Angular within the view

Array of dynamically typed objects in Typescript

Newbie seeking help with Angular Services

The value from select2 dropdown does not get populated in my article in Angular

The type '[Images]' cannot be assigned to type 'string'

I'm looking to learn how to implement the delete method in an API using TypeScript. Can anyone help me out

Leverage a variety of environment files

Jest's --findRelatedTests fails to identify associated test cases

Steps for sorting items from a list within the past 12 hours

What is the proper way to arrange dates within strings in Angular?

Discovering React Styled Components Within the DOM

An Unexpected Error Occurred While Importing HttpClientModule in Angular's Tour of Heroes

The resolve.alias feature in webpack is not working properly for third-party modules

What could be causing the Typescript error when utilizing useContext in combination with React?

List out the decorators

Select specific columns from an array using Typescript

Automatically select the unique item from the list with Angular Material AutoComplete

Typedoc does not create documentation for modules that are imported

Guide on obtaining the total value from a JSON Array in Angular 2 using TypeScript

Enhancing keyboard accessibility with the spacebar for radio buttons and check boxes in Angular 2