Unable to print a list in html using ngFor - html

Question

I am new to angular and front end. I am trying to call a rest Api to fetch a product list. And then I am trying to print them in the html page.
product.component.html
<div class="page-title">Product List</div>
<div class="bgblue">
<div class="product-preview-container">
<ul *ngIf="!emptyProductList">
<p>Available Products</p>
<li *ngFor="let product of products">
<p>Product Name : {{ product.productName }}</p>
<p>Product Code : {{ product.productCode }}</p>
<p>Product Price : {{ product.productPrice }}</p>
</li>
</ul>
<ul *ngIf="emptyProductList">
<p>No Product Found </p>
</ul>
</div>
</div>
product.component.ts
export class ProductComponent implements OnInit {
errorMessage = '';
emptyProductList = true;
products: Product[];
constructor(private productService: ProductService) {
this.products = [];
}
ngOnInit() {
console.log('Called ngOnInit method');
this.productService.fetchProductList().subscribe(
(productList: Product[]) => {
this.products = productList;
if(this.products.length>0){
this.emptyProductList = false;
console.log('not empty');
}
}, err => {
this.errorMessage = err.error;
})
}
}
UPDATE
product.service.ts
export class ProductService {
constructor(private http: HttpClient, private adapter: ProductAdapter) { }
fetchProductList(): Observable<Product[]> {
return this.http.get(PRODUCT_LIST_API, httpOptions).pipe(
map((data: any[]) => [data].map((item) => this.adapter.adapt(item)))
);
}
}
product.model.ts
export class Product {
constructor(
public id: number,
public productCode: string,
public productName: string,
public productPrice: number
) {}
}
#Injectable({
providedIn: "root",
})
export class ProductAdapter implements Adapter<Product> {
adapt(item: any): Product {
return new Product(item.id, item.productCode, item.productName, item.productPrice);
}
}
Updating the productList values :
[Product]
0: Product
id: undefined
productCode: undefined
productName: undefined
productPrice: undefined
__proto__: Object
length: 1
Response json in Postman:
[
{
"id": 1,
"productCode": "P01",
"productName": "Pencil",
"productPrice": 10.0
}
],
Output :
Product List
Available Products
Product Name :
Product Code :
Product Price :
What am I doing wrong here?

Answer 1

The problem is in [data].map((item) => this.adapter.adapt(item))). Note that data is already array, so there is no need to [].
Try this one:
data.map((item) => this.adapter.adapt(item)))