Problem on casting objects to array of a model in Angular - json

Question

Here is my service code:
export class ProductListService {
constructor(private httpClient: HttpClient) {
}
getProducts(): Observable<IResponse> {
return this.httpClient.get<IResponse>('https://localhost:7127/Product/GetProductList');
}
}
and here is my component:
getProducts(): void {
this.productsService.getProducts()
.subscribe((response: IResponse) => {
this.products = <Product[]>response.data;
})
}
Which Product and IResponse are models:
export interface Product {
Id: string;
Title: string;
Description: string;
ImageUri: string;
CategoryId: string;
}
export interface IResponse {
data: object;
status: number;
}
When I get data from the api, it returns data as follow:
{
"data": [
{
"id": "e15",
"title": "LED TV 42 inch ",
"description": "-",
"imageUri": "C:\\wwwroot/cdn\\e15.jpg",
"categoryId": "tv"
},
{
"id": "e16",
"title": "LED TV 52 inch ",
"description": "-",
"imageUri": "C:\\wwwroot/cdn\\e16.jpg",
"categoryId": "tv"
}
],
"status": 200
}
I want to put the data into my products variable. How could I do this?

Answer 1

I agree with Sean Chase. Change the casing on your model. You also might want to cast the data property on the IResponse interface to Product[] (as a side note, interfaces don't start with I. That's a C# convention).
Are you using the products property in the template HTML? If so, you can use the pipe async syntax and replace the products property with an Observable<Product[]>. Here's an example
// models.ts
export interface Product {
id: string;
title: string;
description: string;
imageUri: string;
categoryId: string;
}
export interface IResponse {
data: Product[];
status: number;
}
// product-list.component.ts
import { Component, OnInit } from '#angular/core';
import { map, Observable, of, Subscription } from 'rxjs';
import { IResponse, Product } from './models';
import { ProductListService } from './products-list.service';
#Component({
selector: 'product-list',
template: `
<div *ngFor="let product of products$ | async">
<div>Id: {{ product.id }}</div>
<div>Title: {{ product.title }}</div>
<div>Description: {{ product.imageUri }}</div>
<div>CategoryId: {{ product.categoryId }}</div>
</div>
`
})
export class ProductListComponent implements OnInit {
products$: Observable<Product[]> = of([]);
constructor(private productsListService: ProductListService) {}
ngOnInit() {
this.products$ = this.productsListService.getProducts().pipe(map((res: IResponse) => res.data));
}
}
// product-list.service.ts
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { Observable, of } from 'rxjs';
import { IResponse, Product } from './models';
#Injectable({
providedIn: 'root',
})
export class ProductListService {
// constructor(private httpClient: HttpClient) {}
getProducts(): Observable<IResponse> {
// return this.httpClient.get<IResponse>('https://localhost:7127/Product/GetProductList');
return of({
data: [
{
id: '1',
title: 'title-1',
description: 'description-1',
imageUri: '/images/image-1.jpg',
categoryId: '1'
} as Product,
{
id: '2',
title: 'title-2',
description: 'description-2',
imageUri: '/images/image-2.jpg',
categoryId: '2'
} as Product,
],
status: 200
});
}
}