CODEWITHSUNDEEP
angular
Mohd yasar
Mohd yasar

Reputation: 43

JSON to Dynamic HTML Table in Angular

How to create Dynamic Html Table with Column and row ? Below is the JSON data and I want to create HTML table using this data :

{
    "columnNames": [
        "Applicant ID(id|Optional)",
        "Roll No",
        "Applicant Name",
        "Password",
        "CA ID",
        "Shift Name",
        "Shift Date",
        "Start Time",
        "End Time"
    ],
    "rows": [
        [
            "122",
            "18",
            "Amit",
            "12345",
            "42",
            "testShift2",
            "2019-12-31",
            "13:00",
            "16:00"
        ]
    ]
}

Upvotes: 0

Views: 345

Answers (2)

Santosh Shinde
Santosh Shinde

Reputation: 1212

Try bellow code will work fine.

<table>
  <tr>
    <th *ngFor=" let header of data?.columnNames">{{header}}</th>
  </tr>
 <tbody>
    <tr *ngFor=" let row of data?.rows">
    <td *ngFor=" let item of row">{{item}}</td>
  </tr>
 </tbody>
</table>

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22203

Suppose your json is stored in data,

Try like this:

<table>
    <tr>
        <th *ngFor="let item of data.columnNames">{{item}}</th>
    </tr>
    <tr *ngFor="let rowData of data.rows">
        <td *ngFor="let el of rowData">{{el}}</td>
    </tr>
</table>

Upvotes: 2

Related Questions