Clash Royale CLAN TAG#URR8PPP

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

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

ngFor

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

Object.keys(data)

2 Answers
2

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>


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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.