Acquire a specified number of items from every category using TypeScript

Question

Acquire a specified number of items from every category using TypeScript

I need to extract N items from each group within a list using Typescript. In C# with LINQ, I would achieve something similar like this but I am unsure of the equivalent in TypeScript.

var rr = db.Products.GroupBy(x => x.ProductSubTypeCategoryId).Select(g => new { GroupName = g.Key, Items = g.Take(4).ToList() });

My model is

const lstTrade : Trade [] = [
  { contractName: 'Contract1' ,amount : 12}, 
  { contractName: 'Contract1' ,amount : 12},
  { contractName: 'Contract1' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20}
];

Now, I have a list of Trade items and my goal is to retrieve only 2 items from the list with unique contract names. Specifically, two items with "Contract1" and two items with "Contract2".

javascript angular typescript

Answer 1

Answer №1

Shanon's answer may be correct, but it only covers the group by part of the code. I will provide two examples - one for GroupBy and one for Take - that can help resolve your issue.

I want to clarify that the GroupBy and Take examples I am sharing are not my own. Credit should be given to this website . This resource can assist with various LINQ tasks in JavaScript (note: working with Arrays in TypeScript involves using JavaScript).

GroupBy

C#

var result = persons.GroupBy(person => person.lastname);

TypeScript

let result = persons.reduce((previous, person) => {
    (previous[person.lastname] = previous[person.lastname] || []).push(person);
    return previous;
}, []);

Take

C#

var result = persons.Take(2);

TypeScript

let result = persons.slice(0, 2);

For your specific scenario, you can follow this approach:

const lstTrade : Trade [] = [
  { contractName: 'Contract1' ,amount : 12}, 
  { contractName: 'Contract1' ,amount : 12},
  { contractName: 'Contract1' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20}
];

let result = lstTrade.reduce((previous, trade) => {
    (previous[trade.contractName] = previous[trade.contractName] || []).push(trade);
    return previous;
}, [])
// The result is now an object with groupedTrades as properties. To limit the items in each group, do the following:
for (const groupName in result) {
    result[groupName] = result[groupName].slice(0, 2);
}

Answer 2

Shanon's answer may be correct, but it only covers the group by part of the code. I will provide two examples - one for GroupBy and one for Take - that can help resolve your issue.

I want to clarify that the GroupBy and Take examples I am sharing are not my own. Credit should be given to this website . This resource can assist with various LINQ tasks in JavaScript (note: working with Arrays in TypeScript involves using JavaScript).

GroupBy

C#

var result = persons.GroupBy(person => person.lastname);

TypeScript

let result = persons.reduce((previous, person) => {
    (previous[person.lastname] = previous[person.lastname] || []).push(person);
    return previous;
}, []);

Take

C#

var result = persons.Take(2);

TypeScript

let result = persons.slice(0, 2);

For your specific scenario, you can follow this approach:

const lstTrade : Trade [] = [
  { contractName: 'Contract1' ,amount : 12}, 
  { contractName: 'Contract1' ,amount : 12},
  { contractName: 'Contract1' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20}
];

let result = lstTrade.reduce((previous, trade) => {
    (previous[trade.contractName] = previous[trade.contractName] || []).push(trade);
    return previous;
}, [])
// The result is now an object with groupedTrades as properties. To limit the items in each group, do the following:
for (const groupName in result) {
    result[groupName] = result[groupName].slice(0, 2);
}

Answer 3

Answer №2

When it comes to working with Arrays and Collections in any programming language, the use of reduce is key for solving array-based problems effectively. In this example, the array has been transformed into an object where items are grouped by their contractName. This allows for easy access and manipulation of the data.

const lstTrade = [
  { contractName: 'Contract1' ,amount : 12}, 
  { contractName: 'Contract1' ,amount : 12},
  { contractName: 'Contract1' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20}
];


const intoObject = lstTrade.reduce<Record<string, typeof lstTrade>>((grouped, curr) => {
  return {...grouped, [curr.contractName]: (grouped[curr.contractName] || []).concat(curr)}
}, {})

/*
{
    Contract1: [{contractName: 'Contract1, amount: 12'}, {contractName: ....}...]
    Contract2: [...]
}
*/

Answer 4

When it comes to working with Arrays and Collections in any programming language, the use of reduce is key for solving array-based problems effectively. In this example, the array has been transformed into an object where items are grouped by their contractName. This allows for easy access and manipulation of the data.

const lstTrade = [
  { contractName: 'Contract1' ,amount : 12}, 
  { contractName: 'Contract1' ,amount : 12},
  { contractName: 'Contract1' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20},
  { contractName: 'Contract2' ,amount : 20}
];


const intoObject = lstTrade.reduce<Record<string, typeof lstTrade>>((grouped, curr) => {
  return {...grouped, [curr.contractName]: (grouped[curr.contractName] || []).concat(curr)}
}, {})

/*
{
    Contract1: [{contractName: 'Contract1, amount: 12'}, {contractName: ....}...]
    Contract2: [...]
}
*/

Acquire a specified number of items from every category using TypeScript

Answer №1

GroupBy

C#

TypeScript

Take

C#

TypeScript

Answer №2

Similar questions

Align the object with the path it is following

Concealing a button once the collapse feature is toggled in Bootstrap

"Strategies for effectively utilizing the .find method to locate specific users within a database

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Looks like an error has occurred: "Swal has not been defined"

Can you delve into the origin of the term Modal in the context of Angular and web development?

Steer clear of 405 errors by implementing AJAX in combination with Flask and JINJA templ

combine a pair of elements simultaneously

Disabling dynamic color updates upon refresh

Using a React component to import a module for publishing on NPM

Is there a way to utilize Angular in identifying whether a given value corresponds with the value of a particular radio button within my application?

Nuxt - Issue persisting logged in state on refresh despite information being stored in local storage and cookies

Passing data through Angular2 router: a comprehensive guide

What is the process of including assetlinks.json in an Angular project to enable Android App Links?

Sending the :id parameter to the Service component

Expanding MaterialUi styled components by incorporating TableCellProps: A guide

Compiling a list of products, but the user interface needs some adjustments

What is the best way to set up Observables in Angular's strict mode?

Having issues with my Angular directive not receiving data from the controller

The endpoint /api/user does not allow POST requests