How to Loop Object keys and display in table using angular 2+

Question

I have data:

   data = {
    "laptop": [
        "dell", 
        "hp", 
        "lenovo", 
        "acer", 
        "asus"
    ],
    "mobile": [
        "lenovo", 
        "motorolla", 
        "apple", 
        "samsung"
    ] 
}

I am trying to display it in the table using the ngFor for displaying the data in the below format

But I am unable to get the data in the below rather than I am getting only data in the traditional format leaving laptop,mobile keys is there any way to do that in the template

Stackblitz demo

is there any alternative approach or better becoz in future i may get n rows for the table

I can't see anything in your stackblitz. Also, it's not that easy to understand your question. What is "the traditional format"? — Nick
– Nick, Commented Aug 6, 2018 at 7:17
To get Object keys you can use Object.keys(data). The rest of this is straight forward. — sabithpocker
– sabithpocker, Commented Aug 6, 2018 at 7:20
@Chellappan actually i pasted it but it is not displaying it i dont know why — 2 Developer
– 2 Developer, Commented Aug 6, 2018 at 7:36
@Nick actually i pasted it but it is not displaying it i dont know why — 2 Developer
– 2 Developer, Commented Aug 6, 2018 at 7:36

Chellappan வ · Accepted Answer · 2018-08-06 07:23:53Z

2

If you are using angular 6.1 you can use keyvalue

<div *ngFor="let title of data | keyvalue">
  {{title.key}}
</div>

Example :https://stackblitz.com/edit/keyvalue-pipe

answered Aug 6, 2018 at 7:23

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

Comments

user4676340 · Accepted Answer · 2018-08-06 07:21:17Z

1

You can use this :

get dataKeys() { return Object.keys(this.data); }

This will create an array of the keys of your object.

You can now use a loop on it :

<div *ngFor="let key of dataKeys">
  <div *ngFor="let item of data[key]">...</div>
</div>

answered Aug 6, 2018 at 7:21

user4676340

Collectives™ on Stack Overflow

How to Loop Object keys and display in table using angular 2+

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related