Angularjs Generate Table dynamically based on column property

Question

I am trying to generate table in angularjs with column property but data are not displayed based on it's header.
here is my code.

    $scope.headers = [{
     "order": 1,
     "width": 0,
     "label": "ID",
     "data": "id",
     "type": "string",
     "visible": true
   },
   {
     "order": 2,
     "width": 120,
     "label": "Last Name",
     "data": "lastName",
     "type": "string",
     "visible": true
   },
   {
     "order": 3,
     "width": 129,
     "label": "First Name",
     "data": "firstName",
     "type": "string",
     "visible": false
   },
   {
     "order": 4,
     "width": 200,
     "label": "Email Address",
     "data": "email",
     "type": "string",
     "visible": false
   },
   {
     "order": 5,
     "width": 120,
     "label": "Phone Number",
     "data": "phoneNumber",
     "type": "string",
     "visible": true
   },
   {
     "order": 6,
     "width": 80,
     "label": "Username",
     "data": "username",
     "type": "string",
     "visible": true
   },
   {
     "order": 7,
     "width": 100,
     "label": "Last Login",
     "data": "lastLoginDate",
     "type": "date",
     "visible": true
   }
 ];

 $scope.users = [{
     "id": "1",
     "lastName": "Test1",
     "firstName": "Test",
     "email": "[email protected]",
     "phoneNumber": "(555) 111-0001",
     "username": "ttest1",
     "lastLoginDate": "12/28/2012 3:51 PM"
   },
   {
     "id": "2",
     "lastName": "Test2",
     "firstName": "Test",
     "email": "[email protected]",
     "phoneNumber": "(555) 222-0002",
     "username": "ttest2",
     "lastLoginDate": "12/28/2012 3:52 PM"
   },
   {
     "id": "3",
     "lastName": "Test3",
     "firstName": "Test",
     "email": "[email protected]",
     "phoneNumber": "(555) 333-0003",
     "username": "ttest3",
     "lastLoginDate": "12/28/2012 3:53 PM"
   },
   {
     "id": "4",
     "lastName": "Test4",
     "firstName": "Test",
     "email": "[email protected]",
     "phoneNumber": "(555) 444-0004",
     "username": "ttest4",
     "lastLoginDate": "12/28/2012 3:54 PM"
   },
   {
     "id": "5",
     "lastName": "Test5",
     "firstName": "Test",
     "email": "[email protected]",
     "phoneNumber": "(555) 555-0005",
     "username": "ttest5",
     "lastLoginDate": "12/28/2012 3:55 PM"
   }

 ];

Please provide your HTML code.

Surjeet Bhadauriya
– Surjeet Bhadauriya

2018-11-06 06:48:59 +00:00
Commented Nov 6, 2018 at 6:48 — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Nov 6, 2018 at 6:48

Ajay Ojha · Accepted Answer · 2018-11-06 07:04:41Z

1

you need to fire first loop on table row and second loop on table data. Table row loop is for users array and Table Data Loop for headers array. Please check on example on stackblitz

Here is the HTML code :

<table>
  <thead>
    <th ng-repeat="header in headers">{{header.label}}</th>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td ng-repeat="header in headers">
        {{user[header.data]}}
    </td>
    </tr>
  </tbody>
</table>

answered Nov 6, 2018 at 7:04

Ajay Ojha

3901 gold badge3 silver badges9 bronze badges

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

Comments

Tushar · Accepted Answer · 2018-11-06 07:04:29Z

0

You can try this

<table>
    <thead>
        <th ng-repeat="column in headers">{{column.label}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td ng-repeat="column in headers">
                {{user[column.data]}}
            </td>
        </tr>
    </tbody>
</table>

Hope this helps.

edited Nov 6, 2018 at 7:04

answered Nov 6, 2018 at 6:58

Tushar

1,1231 gold badge12 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angularjs Generate Table dynamically based on column property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related