My Spring Boot back-end sends responses to front-end requests like this:

{
    "timestamp":[2022,6,16],
    "status":"OK",
    "data": {
                "products": [{"product1":"Rake"},{"product2":"Hammer"},...]
            }
    
}

How do I unwrap this response so that I can store the value of "products" (the products array) in the data variable below and display it in my table (I'm using Material btw)?

/**
 * Data source for the ProductTable view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class ProductTableDataSource extends DataSource<ProductTableItem> {

  data: ProductTableItem[] = [];
  paginator: MatPaginator | undefined;
  sort: MatSort | undefined;
  errorMessage: string = '';

  constructor(private productService: ProductService) {
    super();
    this.productService.getProducts().subscribe({
      next: products => this.data = products,
      error: err => this.errorMessage = err
    });
  }

You can see that the above won't work because I am sending the whole response (including the timestamp and status fields) to the data variable which only expects an array like this: [{"product1":"Rake"},{"product2":"Hammer"},...].

Here is my service class:

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'back-end URL';

  constructor(private http: HttpClient) {
  }

  getProducts(): Observable<ProductTableItem[]> {
    return this.http.get<ProductTableItem[]>(this.productUrl).pipe(
      tap(data => console.log('All', JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

CodePudding user response：

Your service doesn't return ProductTableItem but the server response. Create two models:

export class ProductData {
  products?: ProductTableItem[]
}

and

export class ServerResponse<T> {
  timestamp: any;
  status: string;
  data: T;
}

Now in your service:

getProducts(): Observable<ServerResponse<ProductData>> {
  return this.http.get<ServerResponse<ProductData>>(this.productUrl)
    .pipe(
      tap(data => console.log('All', JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

and in your component:

this.productService.getProducts().subscribe({
    next: (response : ServerResponse<ProductData>) => this.data = response?.data?.products,
    error: err => this.errorMessage = err
  });