CODEWITHSUNDEEP
angulartypescriptngfor
user7426734
user7426734

Reputation:

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.

Upvotes: 0

Views: 906

Answers (3)

amal
amal

Reputation: 3170

You can use this,

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

if you prefer only one ngFor in your template. (confirmed it working locally). This logic basically appends more and more columns (with header and value within, in 2 rows) to the right based on the array length. Hope it helps.

Upvotes: 0

Jerry Zhang
Jerry Zhang

Reputation: 309

<tr>  <td *ngFor=" let res of accountList"> {{res.Amount}} </td></tr>

Upvotes: 0

Ben
Ben

Reputation: 5626

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

Upvotes: 1

Related Questions