face turn face turn - 3 years ago 139
JSON Question

ngFor over json to generate a table

I have json array as follows,


[ {
"AccountName": "test1",
"Amount": "-28.11" }, {
"AccountName": "test2",
"Amount": "400" }, {
"AccountName": "test3",
"Amount": "-500" } ]


i need to generate a table as follows,

test1 | test2 | test3
---------------------
-28.11| 400 | 500


this is what i have tried

<table>
<thead>
<tr>
<td *ngFor=" let key of accountList">
{{key.AccountName}}
</td>
</tr>
</thead>
<tbody>
<tr *ngFor=" let res of accountList">
{{res.Amount}}
</tr>
</tbody>
</table>


this generates 3 hortizontal rows, i want all in one line for the corresponding heading.

Ben Ben
Answer Source

Your 2nd row is generating more rows (looping on the tr), not columns. Add another td level and loop on that:

<table>
  <thead>
    <tr>
      <td *ngFor=" let key of accountList">
        {{key.AccountName}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td *ngFor=" let res of accountList">
        {{res.Amount}}
      </td>
    </tr>
  </tbody>
</table>

Plunker: http://plnkr.co/edit/MldBaGTVGEPi7apIT0V0?p=preview

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download