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.

https://www.typescriptlang.org/play?#code/MYewdgzgLgBBoCcCmEYF4YG8BQM-4LwCIBzBAQwBMkBGIgLl0Of0yIFtyoALBomgEwAGIgBoiSMCQA2ASwi96-ISIC+opi3ykK1AQ01aCbTjz4BWEeMkz5iopaLrDWnVSQBmA0ZYmu9gE4rCSk5BT4AdjUXFlVsGMJQSBBpJAA6aRASAAoAeQAjACskYCg0gGskAE8IbPgQZAgASiagA it does work — Jorge Guerreiro, Feb 03 '23 at 08:56
Does this answer your question? [Get array of object's keys](https://stackoverflow.com/questions/8763125/get-array-of-objects-keys) — CoderApprentice, Feb 03 '23 at 09:00
yes, but if i want them as an index key and loop, it doesn't work. — viiii, Feb 03 '23 at 09:05
it doesn't need to be an array, use keyvalue pipe to transform it — traynor, Feb 03 '23 at 09:29
@traynor Didn't know we could do things this way, it's interesting. — manjiro sano, Feb 03 '23 at 09:30

score 3 · Accepted Answer · answered Feb 03 '23 at 09:28

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}}

score 0 · Answer 2 · answered Feb 03 '23 at 10:41

0

Try this

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

answered Feb 03 '23 at 10:41

How to loop and display object key?

2 Answers2