CODEWITHSUNDEEP
javascriptjsonangular
Kenzo
Kenzo

Reputation: 377

Iterate through Json objects in Angular 2

Having trouble rendering json on an Angular 2 app. Tried a few suggestions and I've gotten to the code below. Issue is, I can see it in my console log, but can't see it on my template. No errors are popping up either.

API:

{
    "count": 2,
    "next": null,
    "previous": null,
    "results": [
        {
            "perk": "apple equipment",
            "id": 1
        },
        {
            "perk": "catered food",
            "id": 2
        }
    ]
}

API service: 

 getPerkList() {
   return this.http.get(this.perkUrl).map(
    (res) => res.json()
   )
 }

component.ts:

export class CompanyProfileEditComponent implements OnInit {
  perkList: Object;
}

ngOnInit() {
  this.ApiService.getPerkList()
  .subscribe(data => {
  this.perkList = data;
     console.log(this.perkList);
 });
}

HTML:

 <ul *ngIf="perkList">
  <a *ngFor="let perkResult of perkList.children |  slice:0:7" (click)="onAddPerk(perkResult)">
         <li>{{ perkResult }}</li>
  </a> 
 </ul>

Upvotes: 0

Views: 27

Answers (1)

baao
baao

Reputation: 73221

*ngFor="let perkResult of perkList.children should be *ngFor="let perkResult of perkList.results since the object doesn't have a property children, and you'll want to show a property, not the whole object in the li

 <ul *ngIf="perkList">
  <a *ngFor="let perkResult of perkList.results |  slice:0:7" (click)="onAddPerk(perkResult)">
         <li>{{ perkResult.perk }}</li>
  </a> 
 </ul>

Upvotes: 1

Related Questions