using ngFor to render table in a particular layout

Question

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

Read this, it will help you http://stackoverflow.com/questions/36364556/print-attributes-values-from-json-array-in-angular2 — Clement Amarnath, Jun 09 '16 at 04:44
just check before you add question on stackoverflow 100 of examples on this site for ngFor or check angular 2 site for basics https://angular.io/docs/ts/latest/quickstart.html — mayur, Jun 09 '16 at 04:48

score 2 · Accepted Answer · answered Jun 09 '16 at 04:46

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>

using ngFor to render table in a particular layout

1 Answers1