Iterate through array of objects using *ngFor of angular

Question

The array consists of a key and value pair of objects.i want iterate through to fetch key and values of object.

var arr = [{fruit: banana},{color: red},{city: London},{count: 10},{price: 100$}];

i tried using keyvalue pipe

<div class="bx--row" *ngFor="let obj of arr | keyvalue; let i = index;">
     <span class="bx--col-xs-5 bx--col-md-5"> {{obj.key}} :</span>
     <span class="bx--col-xs-5 bx--col-md-5">{{obj.value}} </span>
</div>

Expected result:

fruit : banana
color: red
city: London
count : 10
price : 100$

Does this answer your question? access key and value of object using *ngFor — Ajit Soman
– Ajit Soman, Commented Jun 4, 2020 at 10:10

Barremian · Accepted Answer · 2020-06-04 10:16:44Z

3

You might need two *ngFor directives. Try the following

<div class="bx--row" *ngFor="let obj of arr; let i = index;">
  <ng-container *ngFor="let item of obj | keyvalue">
    <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
    <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
  <ng-container>
</div>

Or you could merge the individual objects to a single object in the controller and iterate it with a single *ngFor.

Controller

const arr = [{fruit: 'banana'},{color: 'red'},{city: 'London'},{count: 10},{price: '100$'}];
const obj = Object.assign({}, ...arr)

Template

<div class="bx--row" *ngFor="let item of obj | keyvalue; let i = index;">
  <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
  <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
</div>

edited Jun 4, 2020 at 10:16

answered Jun 4, 2020 at 10:10

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

Shlok Nangia · Accepted Answer · 2020-06-04 10:20:40Z

0

You can do it like this

in html

<div class="bx--row" *ngFor="let obj of arr">
     <span class="bx--col-xs-5 bx--col-md-5"> {{objectKeys(obj)}} :</span>
     <span class="bx--col-xs-5 bx--col-md-5">{{obj[objectKeys(obj)]}} </span>
</div>

in ts

objectKeys(obj){
 return Object.keys(obj)[0];
}

answered Jun 4, 2020 at 10:20

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Iterate through array of objects using *ngFor of angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related