CODEWITHSUNDEEP
angulartypescript
BabyDriver
BabyDriver

Reputation: 181

iterate object keys using *ngFor in Angular 10

I want to iterate the "others" with *ngFor I got the "id" and "year" correct but when I try to iterate "others", I got [object object]

 {
        "id": 11,
        "year": [
        2019,
        2020
        ],
        "others": {
        "name": "John",
        "age": "19",
        "work": "yes",
        },
    }

Upvotes: 0

Views: 2899

Answers (3)

Ogheneovie Oki-Peter
Ogheneovie Oki-Peter

Reputation: 44

You’ll have to add the “key value” pipe for you to be able to use *ngFor with objects.

<div *ngFor="let item of object | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

Upvotes: 0

edhi.uchiha
edhi.uchiha

Reputation: 364

You can't do string interpolation to call an object, but you should call any single property from the object.

<h1>{{others}}</h1> // output [object object]


// do like this

<h1>{{others.name}}</h1>

And object is not a something that you can iterate

Upvotes: 0

BabyDriver
BabyDriver

Reputation: 181

I got it, By using the safe navigation ? So it will be data.others?.name

Upvotes: 1

Related Questions