CODEWITHSUNDEEP
javascriptangularjs
Anup
Anup

Reputation: 9738

Data in table format with Header & Row

DEMO

I have following array : -

var data = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
        "lastname": "Lesnar",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
        "lastname": "Cena",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}];

I want to show it in Table format in my HTML. My issue is the table header & the row data do not match. You can check the fiddle for demo.

What i am doing wrong?

Upvotes: 0

Views: 65

Answers (1)

Coder
Coder

Reputation: 7076

You don't have to do anything in the function.

JS FIDDLE UPDATE

JS

function TableController($scope) {
    $scope.rows = data;
}

HTML

<div ng-app="" ng-controller="TableController">
    <table>
        <tr>
            <th ng-repeat='(key, value) in rows[0]'>{{key}}</th>
        </tr>
        <tr ng-repeat='row in rows'>
            <td ng-repeat='cell in row'>{{cell}}</td>
        </tr>
    </table>
</div>

Upvotes: 3

Related Questions