read [object object] using angular-2,

Question

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 image is here

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

What does the output look like if you put the `console.log(...)` just after `this.data = res.json();`? — Günter Zöchbauer, Jan 09 '18 at 09:12
`categories`is an array, it is going to print `object`, you need to specify what part of array is to used.On a side note, why `Array.of(this.data)` ? — Bhavik Patel, Jan 09 '18 at 09:14
Then that's the string the server returns to `http.get()`. You need to fix the issue on the server. Perhaps a missing `JSON.stringify(...)` — Günter Zöchbauer, Jan 09 '18 at 09:35
Earlier i got this "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." error msg,to get rid of that error ,i added that line @BhavikPatel — Ras, Jan 09 '18 at 09:35
I doubt `Array.of()` will give you a useful result. Either the returned value is already an array, or if not you should rather use something like https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor/41396558#41396558 — Günter Zöchbauer, Jan 09 '18 at 09:37
It didnt Solve my issue. json is loaded locally,in my case( /assets/data.json), — Ras, Jan 09 '18 at 09:46
I tried {{item.title}} and {{item.desc}} ..still no luck @BhavikPatel — Ras, Jan 09 '18 at 09:55

score 0 · Answer 1 · answered Jan 09 '18 at 10:19

Your categories need to be an iterable object. Currently you have a JSON object and Angular is not able to iterate over an Object's properties.

If you can change the JSON file format it might help:

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

If you need to iterate over an Object you can look into Object#values method and see if it helps: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

read [object object] using angular-2,

1 Answers1