need to access and loop json array using angular 2

Question

I access this API to get a JSON object and I need "image" components path and "username" to display in the html.but I keep getting this error

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Component File

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http,Headers} from '@angular/http';
import { SalePage } from '../sale/sale';
import * as Variables from '../variables';

@Component({
  selector: 'page-store',
  templateUrl: 'mystore.html'
})
export class MystorePage {
  items:any;

  constructor(public navCtrl: NavController,public http:Http) {
    this.testget();
  }
  onLoadSale(){
    this.navCtrl.push(SalePage);
  }
  testget(){
    console.log("testget");
     this.http.get('http://url/api/url').map(res=>res.json()).subscribe(data=>{
       this.items=data;
       console.log(data.image);
     });   
  }
}

HTML FILE

<ion-header>
    <ion-navbar>
       <ion-title align-title="center" style="margin-left:2%;"> 
            <span style="color:#ffffff">My Store</span>
        </ion-title>
        <ion-buttons end>
               <ion-icon style="color:#ffffff;font-size:30px;visibility:hidden" name="settings"></ion-icon>
       </ion-buttons>
    </ion-navbar>
    <ion-navbar>
      <ion-title>
          <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
      </ion-title>
</ion-navbar>
</ion-header>
    <ion-content>
     <ion-list style="margin-top:10px">
        <div *ngFor="let item of items" class="background" (click)="onLoadMyStore()">
             <h1 style="position:absolute;margin-top:120px;margin-left:10px;color:#000000">{{item.stores.image}}</h1>
             <img src="{{item.stores.image.path}}">
        </div>
    </ion-list>
</ion-content>

JSON Object

{
    "success": true,
    "errors": [],
    "errfor": {},
    "value": "stores",
    "stores": [
        {
            "_id": "5959e0a832fcb649418fabec",
            "__v": 0,
            "search": [
                "Addidas"
            ],
            "likes": [],
            "userCreated": {
                "id": "5953c2b87b65b04eb15f8c5c",
                "time": "2017-07-03T06:14:00.119Z",
                "name": "user1"
            },
            "sales": [],
            "image": {
                "name": "pl.jpg",
                "path": "/uploads/1499062565052_pl.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "name": ""
            },
            "rep1": {
                "name": ""
            },
            "username": "Addidas"
        },
        {
            "_id": "5959fa9ce24f1e4d3a606b1f",
            "__v": 0,
            "search": [
                "STORE2"
            ],
            "likes": [],
            "userCreated": {
                "id": "5953c2b87b65b04eb15f8c5c",
                "time": "2017-07-03T08:04:44.355Z",
                "name": "user1"
            },
            "sales": [],
            "image": {
                "name": "10-dithering-opt.jpg",
                "path": "/uploads/1499069092512_10-dithering-opt.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "name": ""
            },
            "rep1": {
                "name": ""
            },
            "username": "STORE2"
        },
        {
            "_id": "595a00913996594e24aa1808",
            "__v": 0,
            "search": [
                "DemoStore"
            ],
            "likes": [],
            "userCreated": {
                "id": "5959ffe53996594e24aa1807",
                "time": "2017-07-03T08:30:09.369Z",
                "name": "DemoUser"
            },
            "sales": [],
            "image": {
                "name": "photo.jpg",
                "path": "/uploads/1499070897512_photo.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "id": "595a00e33996594e24aa180a",
                "name": "DemoRep2"
            },
            "rep1": {
                "id": "595a00aa3996594e24aa1809",
                "name": "DemoRep1"
            },
            "username": "DemoStore"
        }
    ]
}

are you sure data is an array? post the console.log of it

Sajeetharan
– Sajeetharan

2017-07-03 12:00:00 +00:00
Commented Jul 3, 2017 at 12:00 — Sajeetharan
– Sajeetharan, Commented Jul 3, 2017 at 12:00
@Sajeetharan I posted it

UIB
– UIB

2017-07-03 12:03:05 +00:00
Commented Jul 3, 2017 at 12:03 — UIB
– UIB, Commented Jul 3, 2017 at 12:03

Mario Petrovic · Accepted Answer · 2017-12-21 12:43:31Z

1

You need to assign stores to items like below:

this.items = data.stores;

And in HTML:

<div *ngFor="let item of items" class="background" (click)="onLoadMyStore()">
     <h1 style="position:absolute; margin-top:120px; margin-left:10px; color:#000000;">{{ item.image.name }}</h1>
     <img src="{{ item.image.path }}">
</div>

edited Dec 21, 2017 at 12:43

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Jul 3, 2017 at 12:04

Dhyey

4,3453 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

UIB Over a year ago

I got an error ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'stores' of undefined TypeError: Cannot read property 'stores' of undefined

Dhyey Over a year ago

the JSON Object in question is console.log(data), right ? or is it data.image

UIB Over a year ago

data.image is the problem

Dhyey Over a year ago

so u confirm you got the JSON obj in ques by writing console.log(data.image) ?

Sajeetharan · Accepted Answer · 2017-07-03 12:04:52Z

0

You need to do something like this by accessing stores of the data object.,

 <ion-list style="margin-top:10px">
        <div *ngFor="let item of items.stores" class="background" (click)="onLoadMyStore()">
             <h1 style="position:absolute;margin-top:120px;margin-left:10px;color:#000000">{{item.image}}</h1>
             <img src="{{item.image.path}}">
        </div>
    </ion-list>

or you can just do this in .ts file

this.items = data.stores;

answered Jul 3, 2017 at 12:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Sajeetharan Over a year ago

@UIB the above answer is same as this

Mario Petrovic · Accepted Answer · 2017-12-21 12:23:00Z

0

Based on your console.log you need to put stores property into items

testget(){
    console.log("testget");
    this.http.get('http://url/api/url').map(res=>res.json()).subscribe(data=>{
       this.items=data.stores;
       console.log(data.image);
    });   
}

edited Dec 21, 2017 at 12:23

answered Jul 3, 2017 at 12:04

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

need to access and loop json array using angular 2

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related