CODEWITHSUNDEEP
angular
Stasia
Stasia

Reputation: 7

How to render data in table Anguar?

I got the following JSON response:

let rows = [[{"key":"undetected","value":"","indexrow":0,"columnindex":0},{"key":"fullname","value":"Robert servel","indexrow":0,"columnindex":1},{"key":"num","value":"5137999","indexrow":0,"columnindex":2},{"key":"mmyy","value":"09\/24","indexrow":0,"columnindex":3},{"key":"country","value":"MASTERCARD FRANCE S.A.S.","indexrow":0,"columnindex":5},{"key":"name","value":"servel","indexrow":0,"columnindex":6},{"key":"name","value":"roselyne","indexrow":0,"columnindex":7},{"key":"undetected","value":"20\/05\/1962","indexrow":0,"columnindex":8},{"key":"email","value":"[email protected]","indexrow":0,"columnindex":9},{"key":"address","value":"10, route d'arlanc","indexrow":0,"columnindex":10},{"key":"address","value":"Craponne sur arzon","indexrow":0,"columnindex":11},{"key":"zip","value":"43500","indexrow":0,"columnindex":12},{"key":"phone","value":"08888","indexrow":0,"columnindex":13}]];

It is array of rows with array of columns where column is like:

{"key":"zip","value":"43500","indexrow":0,"columnindex":12}

I try to render this object in table form:

<table>
    <ng-container *ngFor="let row of rows">
        <tr>
            <td *ngFor="let column of row">
                {{column.value || '-'}}
            </td>
        </tr>
    </ng-container>
</table>

Hwo to display each column the same contect type? For exmaple for all rows in first column must be zip type etc.

Yes, I can sort array of columns in sequance what I need by keys: "zip", "num", "fullname"

Upvotes: 0

Views: 644

Answers (1)

The Fabio
The Fabio

Reputation: 6240

I would advise you to do some data transformation before you display it in a html table...

your data has the row and column index as well as the name of the data points and its values:

{"key":"undetected","value":"","indexrow":0,"columnindex":0}

{"key":"fullname","value":"Robert servel","indexrow":0,"columnindex":1}
  1. I suggest you transform it into something that looks like this:
rows = [
 { "undetected": "", "fullname": "Robert servel", ...}
 ... 
]
  1. once the transformation is done building the table columns with the desired order becomes considerably easier:
<table>
  <thead>
    <tr>
      <th>Undetected</th>
      <th>Full name</th>
      ... 
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let row of rows">
        <tr>
            <td> {{row.undetected || '-'}} </td>
            <td> {{row.fullname || '-'}} </td>
            ...
        </tr>
    </ng-container>
  </tbody>
</table>

Upvotes: 1

Related Questions