How to loop and display object key?

Question

I have an object as following below:

scores = {"grade1":
               {"math":"120","english":"100"},
           "grade2":
               {"math":"50","english":"50"},
           "grade3":
                {"math":"90","english":"70"}
          }

I want to display object key with *ngFor to look like this:

Field: grade1 
Field: grade2 
Field: grade3

I tried using Object.keys(scores) but it doesn't work.

yes, but if i want them as an index key and loop, it doesn't work. — viiii
– viiii, Commented Feb 3, 2023 at 9:05

traynor · Accepted Answer · 2023-02-03 09:28:02Z

3

To loop object keys, transform object to key value pairs with KeyValuePipe:

<div *ngFor="let item of scores | keyvalue">
Field: {{item.key}}

<br>
full object: {{item.key}}:{{item.value | json}}

</div>

and you can get object values via {{item.value}}

answered Feb 3, 2023 at 9:28

traynor

10.4k3 gold badges15 silver badges30 bronze badges

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

Comments

user13062011 · Accepted Answer · 2023-02-03 10:41:12Z

0

Try this

for (let grade in scores) {
  console.log(`Field: ${grade}`);
}

answered Feb 3, 2023 at 10:41

user13062011

Collectives™ on Stack Overflow

How to loop and display object key?

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