*ngFor Object in template Ionic 2 [duplicate]

Question

I have object:

messages = [{
    'One' : [
        {'id' : 1},
        {'id' : 2},
    ],
    'Two' : [
        {'id' : 1},
        {'id' : 2},
    ]
}] ;

I have tried the below code but did't run please tell me where i am doing wrong.

<div *ngFor="let message of messages">
    <div>KEY</div>
    <div *ngFor="let value of message">VALUE</div>
</div>

In code i need show KEY and VALUE

My Solution

In component:

this.messages = data['messages'] ;
this.keys = Object.keys(data['messages']);

In view:

<div *ngFor="let key of keys">
    <div>{{key}}</div>
    <div *ngFor="let message of messages[key]">{{message['id']}}</div>
</div>

NgFor only supports binding to Iterables such as Arrays

Hareesh
– Hareesh

2017-07-31 15:03:05 +00:00
Commented Jul 31, 2017 at 15:03 — Hareesh
– Hareesh, Commented Jul 31, 2017 at 15:03

robbannn · Accepted Answer · 2017-07-31 15:03:06Z

1

If you dont want to create a pipe you can expose Object.keys like in this SO-answer.

Your component:

@Component({
    ...
})
export class YourComponent{
    objectKeys: any = Object.keys;
    messages: Array<any>;

    constructor(){}

    ...
}

HTML:

<div *ngFor="let message of messages">
    <div *ngFor="let key of objectKeys(message)">
        <div>KEY: {{ key }}</div>
        <div *ngFor="let val of message[key]">{{ val.id }}</div>
    </div>
</div>

OUTPUT:

KEY: One
1
2
KEY: Two
1
2

edited Jul 31, 2017 at 15:03

answered Jul 31, 2017 at 14:49

robbannn

5,0231 gold badge35 silver badges48 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2017-07-31 14:40:51Z

-1

You can use a pipe like shown in How to iterate [object object] using *ngFor in Angular 2

<div *ngFor="let message of messages">
    <div>KEY</div>
    <div *ngFor="let key of message | keys">{{message[key]}}</div>
</div>

answered Jul 31, 2017 at 14:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

malifa Over a year ago

you're right, im sorry. i was probably blacking out

Collectives™ on Stack Overflow

*ngFor Object in template Ionic 2 [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related