Ways to categorize items retrieved from an HTTP request to the backend in Angular

Question

Ways to categorize items retrieved from an HTTP request to the backend in Angular

When making a call to the backend using this http request:

this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/)).subscribe(values => {
  this.studentObject = values;
});

The studentObject is structured as shown below:

{
    records: [{name: james, school: USC, .....}, {name: Micheal, school: UCLA, ......},{name: 
         John, school: UCLA, ......}],
    size: 3
}

I am interested in organizing the schools and adding a count before integrating it into the studentObject. This would result in an object similar to:

[{school: UCLA, count: 2}, {school: USC, count: 1}]

javascript angular typescript

Answer 1

Answer №1

Here is an example of using the groupBy operator:

data$ = this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/));

schoolsGrouped$ = data$.pipe(
     concatMap(students => students),
     groupBy(student => student.school),
     mergeMap(group =>
       zip(of(group.key), group.pipe(toArray())).pipe(
         map(([key, students]) => ({ key, students }))
       )
     ),
     toArray()
   );

You can access the grouped data like this:

  constructor() {
    this.schoolsGrouped$.subscribe(schools => 
      schools.forEach(school => console.log(school.key, school.students.length)))
  }

Check out a working example here.

To integrate the grouped info into your existing data structure:

  schoolsGrouped$ = of(this.data.records).pipe(
    concatMap(students => students),
    groupBy(student => student.school),
    mergeMap(group =>
      zip(of(group.key), group.pipe(toArray())).pipe(
        map(([key, students]) => ({ key, students }))
      )
    ),
    tap(
      school =>
        (this.data = {
          ...this.data,
          schools: [
            ...this.data.schools,
            { school: school.key, count: school.students.length },
          ],
        })
    ),
    toArray()
  );

Answer 2

Here is an example of using the groupBy operator:

data$ = this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/));

schoolsGrouped$ = data$.pipe(
     concatMap(students => students),
     groupBy(student => student.school),
     mergeMap(group =>
       zip(of(group.key), group.pipe(toArray())).pipe(
         map(([key, students]) => ({ key, students }))
       )
     ),
     toArray()
   );

You can access the grouped data like this:

  constructor() {
    this.schoolsGrouped$.subscribe(schools => 
      schools.forEach(school => console.log(school.key, school.students.length)))
  }

Check out a working example here.

To integrate the grouped info into your existing data structure:

  schoolsGrouped$ = of(this.data.records).pipe(
    concatMap(students => students),
    groupBy(student => student.school),
    mergeMap(group =>
      zip(of(group.key), group.pipe(toArray())).pipe(
        map(([key, students]) => ({ key, students }))
      )
    ),
    tap(
      school =>
        (this.data = {
          ...this.data,
          schools: [
            ...this.data.schools,
            { school: school.key, count: school.students.length },
          ],
        })
    ),
    toArray()
  );

Ways to categorize items retrieved from an HTTP request to the backend in Angular

Answer №1

Similar questions

Ways to transfer Material-UI FlatButton CSS to a different Button element

How to conceal the side navigation bar on specific pages or components within an Angular application

Changing the color of a single child object in Threejs

Tips for preventing recursion when utilizing scrollIntoView() in a scroll event handler

Removing Angular Template space highlights in WebStorm can be done easily with a few simple steps

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?

Issues with Socket.io in receiving messages on the client side

Issue with arrow function not being invoked in a React TypeScript component's prop inside a function

Saving a revised JSON file using AngularJS

Ways to set the minimum width of a div depending on its contents

Does the Node Schedule library create new processes by spawning or forking them?

The addition and deletion of classes can sometimes lead to disruptions in the DOM

Achieving dynamic height in a parent div with a sticky header using mui-datatables

Modifying a gridview cell through a Modal popup that is displayed using the rel attribute

Utilizing Axios: Maintaining session continuity post successful authorization and including it in subsequent requests - testing in a browser-less environment

Initiate the process of displaying data on a datetime chart using Highcharts

Issue between Promise and EventEmitter causing race conditions in ExpressJS

Is there a way to modify the package version with yarn, either upgrading or downgrading?

The e.currentTarget attribute in Material UI buttons is a key element that

In Next.js, the 404 error page is displayed using getInitialProps