Angular - Unable to print json data in HTML page using *ngFor - json

Question

I am new to angular. I have created a services class that returns a product details in json format.
api.service.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class ApiService {
constructor(private http: Http) { }
fetchData() {
return this.http.get('http://funiks.com/qbook/api/productmasterjson.php').map(
(response) => response.json()
).subscribe(
(data) => data
)
}
}
Now i called this service in component class
api.component.ts
import { Component, OnInit } from '#angular/core';
import { ApiService } from '../api.service';
#Component({
selector: 'app-api',
templateUrl: './api.component.html',
styleUrls: ['./api.component.css']
})
export class ApiComponent implements OnInit {
public details;
constructor(private api:ApiService) { }
ngOnInit() {
this.details = this.api.fetchData();
console.log(this.details);
}
}
Now i want to print all the data in HTML page. This is what i have tried to print the json data
<tr *ngFor="let d of details">
<td>{{d.CATEGORY}}</td>
<td>{{d.HSN}}</td>
<td>{{d.ID}}</td>
<td>{{d.NAME}}</td>
<td>{{d.POSTINGHEAD}}</td>
<td>{{d.PRODUCTSERVICE}}</td>
<td>{{d.RATE}}</td>
<td>{{d.SACCODE}}</td>
<td>{{d.TAX_CONNECTED}}</td>
<td>{{d.TYPE}}</td>
<td>{{d.UNIT}}</td>
</tr>
But unfortunately it throws as error and error is like
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

Your component doesn't know the type of the fetchData, you should type it with
fetchData():Observable<Product[]> {
You shouldn't subscribe to your observable in fetchData(), just return the observable
fetchData():Observable<Product[]> {
return this.http.get('http://funiks.com/qbook/api/productmasterjson.php')
.map((response) => response.json()
)
}
In your component, subscribe to the observable and type details
details: Product[];
ngOnInit() {
this.api.fetchData().subscribe(data => this.details = data);
console.log(this.details);
}

Answer 2

You need to declare your public details as an array first of all
public details: any[];
Before your async request returns anything, your template doesn't know anything about the datatype of details unless you specify it.
I think that's why you are getting such error.
Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays.
Also, put your subscribe part inside your component code

Answer 3

In your ngOnInit, you don't need to assign the return value to this.details as the when you are making get call the requests will have observable subscription. You will get a response in observable success so setting this.details value in success is needed as follows:
ngOnInit() {
this.api.fetchData().subscribe(response => this.details = response;);
console.log(this.details);
}