Got no output while loading json file locally


#1

I was trying to read the json file in my application, but it only shows me: “[object object]”.In the console i can see that, it maps with my json file.but output window showing only “[object object]” like the image below.

here is home.html

 <ion-header>
  <ion-navbar>
    <ion-title>
     Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-card #myCard  *ngFor="let item of quotes.data">

  <ion-card-content>
    <ion-card-title>
    {{item.categories}}
    </ion-card-title>
    <p>
      {{item.menuItems}}
    </p>
  </ion-card-content>
 </ion-card>
</ion-content>



output 
![Screenshot-2018-1-9 Indian - Ionic Lab|281x500](upload://l4KtDlXQXIa4uTcQGZ338fIP7gN.png)



My json File

{

    "categories" : {
      "101flashlight" : {
        "desc" : "Crackers with multiple sounds",
        "thumb" : "infw/thumb/flash.svg",
        "title" : "Flash Light "
      },
      "102zamin" : {
        "desc" : "Crackers with sparks",
        "thumb" : "infw/thumb/zamin.svg",
        "title" : "Zamin Chakkars"
          }
}

service file quote.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
@Injectable()
export class QuoteService{
    public data:any;
    private http:any;

constructor(http:Http){
    this.http=http;

}
getQuotes(){
    this.http.get("assets/data.json")
    .subscribe(res =>{
        this.data=res.json();
        this.data=Array.of(this.data);
        console.log(this.data);
    }, error =>{
        console.log(error);

    });
}
}

I want to show title,desc, and thumb