JSON to Dynamic HTML Table in Angular

Question

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"
        ]
    ]
}

Adrita Sharma · Accepted Answer · 2019-09-04 11:25:03Z

2

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>

answered Sep 4, 2019 at 11:25

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohd yasar Over a year ago

Thanks you so much

Santosh Shinde · Accepted Answer · 2019-09-04 11:29:25Z

1

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>

answered Sep 4, 2019 at 11:29

Santosh Shinde

1,21210 silver badges18 bronze badges

Collectives™ on Stack Overflow

JSON to Dynamic HTML Table in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related