CliffC CliffC - 5 months ago 21
AngularJS Question

using ngFor to render table in a particular layout

I have the following json array string

queryResults=
[
{"name":"cliff","age":"20","hobby":"tennis","email":"cliff@gmail.com"},
{"name":"jason","age":"30","hobby":"golf","email":"jason@gmail.com"}
]


I need to use ngFor to produce the following html layout

<table>
<tr>
<td>name:</td><td>cliff</td>
<td>age:</td><td>20</td>
</tr>
<tr>
<td>hobby:</td><td>tennis</td>
<td>email:</td><td>cliff@gmail.com</td>
</tr>
</table>



<table>
<tr>
<td>name:</td><td>jason</td>
<td>age:</td><td>30</td>
</tr>
<tr>
<td>hobby:</td><td>golf</td>
<td>email:</td><td>jason@gmail.com</td>
</tr>
</table>


How can i accomplish this? any suggestion will be helpful thank you

Answer

Assuming that your JSON is in array form, you can solve this by using *ngFor like this

<table *ngFor="#it of queryResults">
    <tr>
        <td>Name:</td><td>{{it.name}}</td>
        <td>Age:</td><td>{{it.age}}</td>
    </tr>
    <tr>
        <td>hobby:</td><td>{{it.hobby}}</td>
        <td>email:</td><td>{{it.email}}</td>
    </tr>
</table>
Comments