update the data source of the material table inside the subscription

Question

update the data source of the material table inside the subscription

Seeking guidance for updating a MatTable datasource within an Angular application. The current Typescript code involves fetching data from an API using AdminService, iterating over the results to make additional API calls for more information about a fleet.

The existing method successfully updates the datasource without any issues, even though there are complexities involved in acquiring the supplementary data.

Your insights and assistance on this matter would be highly appreciated.

refresh(): void {
    const data = {};
    const that = this;
    this.adminService.fleets(data).subscribe(result => {

      that.fleetTableData = [];

      result.forEach(function (fleetObject){

        if (typeof fleetObject.fleetTotals === 'undefined'){
          fleetObject.fleetTotals = {};
          fleetObject.fleetTotals.totalVehicles = 0;
          fleetObject.fleetTotals.totalActiveVehicles = 0;
          fleetObject.fleetTotals.totalStatusTestedVehicles = 0;
        }

        that.fleetTableData[fleetObject.fleetId] = fleetObject;

        that.adminService.vehicles(
          {fleetId: fleetObject.fleetId}
        ).subscribe(result2 => {

          result2.forEach(function (vehicleForFleet) {
            var fleetId = vehicleForFleet.fleetId;
            that.fleetTableData[fleetId].fleetTotals.totalVehicles = (that.fleetTableData[fleetId].fleetTotals.totalVehicles + 1);
            if (typeof vehicleForFleet.commissioning !== 'undefined') {
              if (vehicleForFleet.commissioning.commissionStatus === 'tested') {
                that.fleetTableData[fleetId].fleetTotals.totalStatusTestedVehicles = (that.fleetTableData[fleetId].fleetTotals.totalStatusTestedVehicles + 1);
              }
              if (vehicleForFleet.commissioning.commissionStatus === 'active') {
                that.fleetTableData[fleetId].fleetTotals.totalActiveVehicles = (that.fleetTableData[fleetId].fleetTotals.totalActiveVehicles + 1);
              }
            }
          });
        });
      });

      that.dataSource.data = new MatTableDataSource(that.fleetTableData);
      that.dataSource.sort = that.sort;
      console.log(that.fleetTableData);
    });

  }

angular typescript angular-material

Answer 1

Answer №1

After examining the code, it appears that this.datasource is already a MatTableDatasource. In that case, you can simply assign this.fleets to the .data property instead of creating a new MatTableDatasource.

this.dataSource.data = that.fleetTableData;

Answer 2

After examining the code, it appears that this.datasource is already a MatTableDatasource. In that case, you can simply assign this.fleets to the .data property instead of creating a new MatTableDatasource.

this.dataSource.data = that.fleetTableData;

Answer 3

Answer №2

When looking at your code example, there are a couple of key strategies to consider:

Avoid nesting subscribe() methods in RxJS, as this can cause issues. It's best practice to have only one subscribe() for better code organization.
Rather than executing logic within subscribe(), utilize RxJS "operators" to handle the data manipulation. This will also help eliminate the need for nested subscribe().

Here is a recommended approach:

this.adminService.fleets(data).pipe(
  map(result=>{
    // Define and retrieve necessary data for adminService.vehicles
  }),
  switchMap(fleetId=>this.adminService.vehicles(fleetId)),
  map(result2=>{
    // Implement logic to define and update this.dataSource for your table
  })
).subscribe()

The map() operator allows you to transform emitted values into new values.

Similarly, the switchMap() function operates like map(), but it enables returning a new observable (such as the vehicles method with parameters from the initial observable).

Lastly, use the map() operator again to process the value emitted by adminService.vehicles() and update the state property this.dataSource.

Answer 4

When looking at your code example, there are a couple of key strategies to consider:

Avoid nesting subscribe() methods in RxJS, as this can cause issues. It's best practice to have only one subscribe() for better code organization.
Rather than executing logic within subscribe(), utilize RxJS "operators" to handle the data manipulation. This will also help eliminate the need for nested subscribe().

Here is a recommended approach:

this.adminService.fleets(data).pipe(
  map(result=>{
    // Define and retrieve necessary data for adminService.vehicles
  }),
  switchMap(fleetId=>this.adminService.vehicles(fleetId)),
  map(result2=>{
    // Implement logic to define and update this.dataSource for your table
  })
).subscribe()

The map() operator allows you to transform emitted values into new values.

Similarly, the switchMap() function operates like map(), but it enables returning a new observable (such as the vehicles method with parameters from the initial observable).

Lastly, use the map() operator again to process the value emitted by adminService.vehicles() and update the state property this.dataSource.

Answer 5

Answer №3

Encountered a similar issue while dealing with a mat-table, and I resolved it using the following method.

this.dataTable = new MatTableDataSource(data)

Answer 6

Encountered a similar issue while dealing with a mat-table, and I resolved it using the following method.

this.dataTable = new MatTableDataSource(data)

update the data source of the material table inside the subscription

Answer №1

Answer №2

Answer №3

Similar questions

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

We discovered the synthetic attribute @onMainContentChange. To properly integrate this feature into your application, make sure to include either "BrowserAnimationsModule" or "NoopAnimationsModule"

Steps for registering an Angular application on a Eureka server

Sass encountered an issue when trying to import using the "~" symbol from the node_modules directory

What is the best way to validate the Click outside directive in Angular applications?

Error Encountered | Invalid Operation: Unable to access attributes of undefined (referencing 'CodeMirror')

How come the information I receive when I subscribe always seems to mysteriously disappear afterwards?

Generics in Typescript implemented for a React component that accepts an array of records along with an array of

After successfully installing @angular/localize, running npm update or npm install could result in a dependency error

The Excel Match function is experiencing issues when used in conjunction with the MS-Graph API

Tips on refreshing asset information within a live Angular application

Hover Effect for 3D Images

What steps do I need to take to update Oceania to Australia on Google Maps?

There seems to be an issue with gulp as it is not functioning properly and the version information is

Utilizing Typescript Generics in Arrow Function to Combine Two Arguments

Tips for referencing functions in TypeScript code

Modifying one input can impact other input elements without any form of direct connection between them

Enhancing Application Performance Through Next.js Development

The 'id' property is not found within the 'Order[]' type

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?