Error while iterating with *ngFor in angular2

Question

I have json response like, Im trying to iterate over json response but it is giving errors

I don't know if angular2 don't suport iteration like this as I'm new to angular2

serive call

return this.http.post(this.url,params)
        .map(res => res.json())

Assigning response to travelGuides

.subscribe(travelGuides => {
        this.travelGuides = travelGuides.resultData;         
}

JSON

{
  "resultCode": 1,
  "resultData": {
    "TravelGuide": [
      {
        "Help": "TravelGuide",
        "IsDocument": "1",
        "EventType": "Success",
        "Category": "HOTEL",
        "SupplierType": "SUPTYPE-0-0-11",
        "HotelSrno": "HOTEL-0-0-62",
        "Name": "Radisson Blu Plaza Bangkok",
        "Optional": "0",
        "Fileupload1": "hotel.jpg",
        "FileUpload1Path": "/Documents/MasterData/HOTEL/HOTEL-0-0-62/hotel.jpg"
      },
      {
        "Help": "TravelGuide",
        "IsDocument": "1",
        "EventType": "Success",
        "Category": "HOTEL",
        "SupplierType": "SUPTYPE-0-0-11",
        "HotelSrno": "HOTEL-0-0-62",
        "Name": "Radisson Blu Plaza Bangkok",
        "Optional": "0",
        "Fileupload1": "hotel.jpg",
        "FileUpload1Path": "/Documents/MasterData/HOTEL/HOTEL-0-0-62/hotel.jpg"
      }
    ],
    "TravelGuide_Img": [
      {
        "Help": "TravelGuide_Img",
        "IsDocument": "0",
        "EventType": "Success",
        "Category": "HOTEL",
        "Name": "hotelimage.jpg",
        "TextoverImg": "Radisson Blu ",
        "Textbox2": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-1",
        "AltText": "Radisson Blu ",
        "path": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-1/hotelimage.jpg",
        "ImageCategoryName": "IMGCATG",
        "HotelName": "Radisson Blu Plaza Bangkok",
        "ImageSize": "Medium",
        "ImageResolution": "IMGSIZE-0-0-1",
        "ImageCategory": "IMGCATG",
        "Hotel": "HOTEL-0-0-62",
        "ImageSize_srno": "IMGSIZE-0-0-1",
        "ImageResolution1": "RESOLUTIO-0-0-1"
      },
      {
        "Help": "TravelGuide_Img",
        "IsDocument": "0",
        "EventType": "Success",
        "Category": "HOTEL",
        "Name": "hotelimage.jpg",
        "TextoverImg": "Text Over Image",
        "Textbox2": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-2",
        "AltText": "Text Over Image",
        "path": "/Documents/MasterData/HOTELIMG/HOTELIMG-0-0-2/hotelimage.jpg",
        "ImageCategoryName": "IMGCATG",
        "HotelName": "Pullman Bangkok Hotel G",
        "ImageSize": "Medium",
        "ImageResolution": "IMGSIZE-0-0-1",
        "ImageCategory": "IMGCATG",
        "Hotel": "HOTEL-0-0-63",
        "ImageSize_srno": "IMGSIZE-0-0-1",
        "ImageResolution1": "RESOLUTIO-0-0-2"
      }
    ]
  }
}

here is *ngFor im trying

 <div *ngFor="let travelguide of travelGuides">
   {{travelguide.TravelGuide.Category}}
 </div>

but getting this

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

also tried

 <div *ngFor="let travelguide of travelGuides.TravelGuide">
   {{travelguide.Category}}
 </div>

for this getting error

Cannot read property 'TravelGuide' of undefined

@NikhilRadadiya i want to know the call you make to http get — Rahul Singh, Jun 07 '17 at 06:17

eko · Answer 1 · 2017-06-07T06:17:53.680

Assuming travelGuides is assigned asynchronously, your code should be like

<div *ngFor="let travelguide of travelGuides?.TravelGuide">
 {{travelguide?.Category}}
</div>

More info on safe navigation operator (?): Why we use "?" operator in template binding in angular 2

or

<div *ngIf="travelGuides && travelGuides.length && travelGuides.length > 0">
  <div *ngFor="let travelguide of travelGuides.TravelGuide">
   {{travelguide.Category}}
  </div>
</div>

score 0 · Answer 2 · answered Jun 07 '17 at 06:11

0

I think if you are assigning the whole response to travelGuides, it should be ,

 <div *ngFor="let travelguide of travelGuides?.resultData.TravelGuide">
   {{travelguide.Category}}
 </div>

EDIT

Change the assignment part as,

.subscribe(travelGuides => {
        this.travelGuides = travelGuides.resultData.TravelGuide;         
}

and HTML

<div *ngFor="let travelguide of travelGuides?.TravelGuide">
 {{travelguide?.Category}}
</div>

answered Jun 07 '17 at 06:11

Sajeetharan

216,225
63
350
396

I can't cause resultData have 2 arrays `TravelGuide` and `TravelGuide_Img` which I want in same div – Nikhil Radadiya Jun 07 '17 at 06:17
Is it possible to iterarte it on same div if I use `this.travelGuides = travelGuides.resultData.TravelGuide; ` and `this.travelGuide_Imgs = travelGuides.resultData.TravelGuide_Img;` – Nikhil Radadiya Jun 07 '17 at 06:20
yeah you can do – Sajeetharan Jun 07 '17 at 06:21
But inner *NgFor iterates for same length as it's parent – Nikhil Radadiya Jun 07 '17 at 06:21

score 0 · Answer 3 · answered Jun 07 '17 at 06:16

If your component model looks something like this:

this.responseData = {
  "resultCode": 1,
  "resultData": {
    "TravelGuide": [
      { somedata }, { somedata }, ...
    ]
  }
}

Your markup for *ngFor would look like:

<div *ngFor="let travelguide of responseData.resultData.TravelGuide">
  {{ travelguide.Category }}
</div>

score 0 · Answer 4 · answered Jun 07 '17 at 06:23

0

Try this

<div *ngFor="let travelguide of travelGuides?.["TravelGuide"]">
 {{travelguide?.Category}}
 ....
</div>

answered Jun 07 '17 at 06:23

Rahul Singh

19,030
11
64
86

Error while iterating with *ngFor in angular2

4 Answers4