how to access complex json object angular 2

Question

//component.ts
public items: any;

getResult(){
    var jsonBody = {};
    jsonBody['activity'] = this.activity;
    jsonBody['seatnumber'] = this.seatNo;

    this.localService.postCall(jsonBody)
        .subscribe(
            data => {
                if (data.message === 'ok') {
                    this.items = data.data.result;
                    console.log(data.data);
                    // window.localStorage.setItem('result',data);
                }
            },
            error => {

            })
}

//localService.ts
postCall(jsonBody){
    const headers = new Headers({
        'Content-Type': 'application/json',
        'Source': 'WEB'
    });
    return this.http.post(this.apiUrl, { body: jsonBody }, { headers: headers })
        .map(data => {
            return data.json();
        },
            error =>
                console.log('unknown error')
        );
}

//json object
{
    "status": true,
        "message": "ok",
            "data": {
        "result": [
            {
                "arts": "75",
                "studentname": "Archana Kol",
                "district": "SIDHI",
                "gender": "F",
                "agri": "70",
                "us": "85",
                "fa": "75",
                "medium": "Hindi",
                "tech": "60",
                "hs": "75",
                "SchoolDies": "23170515307",
                "com": "75",
                "seatnumber": 180734668
            }
        ]
    }
}

<div *ngFor="let item of items">
    {{ item }}
</div>

hello, i am using angular 2, I want to loop through this JSON object. I am able to print this object on console but when I loop this object ngfor this will display me this error "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." how can I solve this. thank you

Answer 1

When you are first starting the component, your items variable is equal to undefined , which isn't iterable.

There's some solutions for that:

1. change public items:any; for public items:any[] = [];

2. use async pipe: in ngOnInit :

    const headers = new Headers({ 'Content-Type': 'application/json', 'Source': 'WEB' }); this.items$ = this.http.post(this.apiUrl, { body: jsonBody }, { headers: headers }) .map(data => { return data.json(); }, error => console.log('unknown error') ); 

Then change items for items$: Observable<any[]> ;

And finally, change your binding from *ngFor="let item of items" to *ngFor="let item of items | async"

You can also wrap the *ngFor in a <div *ngIf="items !== undefined">...</div> .