Brtdku

I'm sending mutliple REST GET Calls to retrieve data from an external ressource.

I can see the requests sent out and returned with the related data. But after the last response I'm getting:
ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer] (ProductcatalogComponent.html:14)

My assumption is that the way I'm storing the data is not right way to do it when collecting multiple Calls...

this is the function from my service.ts

  getData() {

    return this.getProducts('/v1/catalog/products');

  }



 getProducts(url, dataSoFar = ): Observable<any> {

    if (!url) {

      return of (dataSoFar);

    } else {

      url = ZUORA_URL + url;

    }

    return this.http.get<any>(url, { headers }).pipe(

      switchMap(p => this.getProducts( p.nextPage, [...dataSoFar, ...p.data]))

    );

  }

and here is how I call it from the component:

  ngOnInit() {

    this.zuoraService.getData().subscribe(catalog => {

      this.dataSource = new MatTableDataSource(<Catalog>catalog);

      this.dataSource.paginator = this.paginator;

      this.dataSource.sort = this.sort;

    });

  }

this is the model:

export interface Catalog {

  name: string;

  id: string;

  sku: string;

  description: string;

  IsTrialProduct__c: string;

}

and this is the html file

<div class="mat-horizontal-content-container">

  <h1><i class="material-icons">dvr</i> Productcatalog</h1>

</div>



<div class="mat-elevation-z8">

  <mat-form-field style="width: 100%">

    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

  </mat-form-field>



  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">



    <ng-container matColumnDef="name">

      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>

      <td mat-cell *matCellDef="let row">{{row.name}}</td>

    </ng-container>



    <ng-container matColumnDef="sku">

      <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>

      <td mat-cell *matCellDef="let row">{{row.sku}}</td>

    </ng-container>



    <ng-container matColumnDef="description">

        <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>

        <td mat-cell *matCellDef="let row">{{row.description}}</td>

    </ng-container>



    <ng-container matColumnDef="IsTrialProduct__c">

        <th mat-header-cell *matHeaderCellDef mat-sort-header>Trial</th>

        <td mat-cell *matCellDef="let row">{{row.IsTrialProduct__c}}</td>

    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openAccountDetails(row.ID)"></tr>

  </table>



  <mat-paginator #paginator

      [length]="dataSource.data.length"

      [pageIndex]="0"

      [pageSize]="25"

      [pageSizeOptions]="[25, 50, 100, 250]">

  </mat-paginator>

</div>

How can I fix the issue? I will have to use the data at different components. The data won't change often --> what would the best way to prefetch the data once and cache it?

changed the service:

public getCatalog() {

    console.log(this.catalog);

    return this.catalog;

  }



  loadCatalog() {

    this.fetchCatalog().subscribe(catalog => this.catalog.next(catalog));

  }



  public fetchCatalog(): Observable<Catalog> {

    return this.http.get<Catalog>(ZUORA_URL + '/v1/catalog/products?page=1&pageSize=10', { headers })

      .pipe(

        expand(catalog => {

          if (!catalog.nextPage) {

            return EMPTY;

          }

          return this.http.get<Catalog>(ZUORA_URL + catalog.nextPage, { headers });

        }),

        map(catalog => catalog.products),

        reduce((accData, data) => accData.concat(data), ),

      );

  }

added the factory to app.module.ts --> Data is loaded once on app build --> data doens't have to be reloaded any time a user changes the view

export function catalogProviderFactory(zuoraService: ZuoraService) {

  return () => zuoraService.loadCatalog();

}

Component OnInit to build the table:

  ngOnInit() {

    this.zuoraService.catalog$.subscribe(catalog => {

      this.dataSource = new MatTableDataSource(catalog);

      this.dataSource.paginator = this.paginator;

      this.dataSource.sort = this.sort;

    });