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

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

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 2

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);
}

Answer 3

1. Your component doesn't know the type of the fetchData, you should type it with fetchData():Observable<Product[]> {

2. 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()
     )
   } 
   

3. 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);
   }