Issue
Hi all can anyone help me put the JSON that contains the products object into angular HTML? I got it to work in the console (see image below) but I don't know how to show the product data in HTML. This is the code I did.
My app.component.html is
`<div *ngFor="let product of data.products" style="text-align:center">
<div>
{{ product.id }}
{{ product.product_name }}
</div>`
and my app.component.ts is
export class AppComponent {
title = 'Isham-ColdBanana';
public data:any = []
constructor(private http: HttpClient) {
}
getData(){
const url ='https://my-json-server.typicode.com/TomSearle/cb-devtest-api/db'
this.http.get(url).subscribe((res)=>{
this.data = res
console.log(this.data)
})
}
ngOnInit(){
this.getData();
}
}
Solution
Try something like this:
`<div *ngFor="let product of data.products[0]" style="text-align:center">
<div>
{{ product.id }}
{{ product.product_name }}
</div>`
Answered By - Leonardo Lima
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.