CODEWITHSUNDEEP
htmlangular
Nitu Dhaka
Nitu Dhaka

Reputation: 1320

Iteration of Object of arrays of objects Angular4

I need to iterate Object of array of objects in anchor tag. Following is the format of my code

{"1":{"uri":"test1","name":"test1","icon":"http:\/\/dummyurl\/images\/icons\/test1-icon.png","application_id":1},"2":{"uri":"test2","name":"test2","icon":"http:\/\/dummyurl\/images\/icons\/test2-icon.png","application_id":2},"3":{"uri":"test3","name":"test3","icon":"http:\/\/dummyurl\/images\/icons\/test3-icon.png","application_id":3},"4":{"uri":"test4","name":"test4","icon":"http:\/\/dummyurl\/images\/icons\/test4-icon.gif","application_id":4},"5":{"uri":"test5","name":"test5","icon":"http:\/\/dummyurl\/images\/icons\/test5-icon.png","application_id":5}}

.ts file

this.applicationService.getApplication(id)
    .subscribe(applications => {
    this.applications = applications.response;});

html

<a class="dropdown-item" href="#" NgForOf=" let obj of applications">
    {{obj.name}} </a>

I am stuck in this from last 3-4 hours. Any help will be appreciated.

Upvotes: 1

Views: 294

Answers (1)

Kld
Kld

Reputation: 7068

You can loop through them using Object.keys(apps)

this.applicationService.getApplication(id)
  .map(result => result.response)
  .subscribe(apps=> {
    this.applications = Object.keys(apps).map(k => apps[k])
   });

HTML

<div *ngFor="let app of applications">{{app | json}}</div>

Upvotes: 1

Related Questions