Generate html table using angular

Question

I want to generate html table using angular.I have a json object and i used ng-repeat to add multiple rows. But my table structure is different. I want to generate table structure like this:

  <table>
    <tr>
     <td >ID</td>
     <td>Sub</td>
    </tr>
    <tr>
     <td rowspan="3">1</td>
     <td>S1</td>
    </tr>
    <tr>
     <td>S2</td>
    </tr>
    <tr>
     <td>S3</td>
    </tr> 
  </table>

 --------------
  ID  | subjects 
 --------------
      | S1
      --------  
   1  | S2  
      --------
      | S3  
 --------------
      | S4 
      -------- 
   2  | S5  
      --------
      | S6
 --------------

    user:[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

my angular code is:

      <tr ng-repeat = "user in users">
         <td>{{user.id}}</td>
         <td>{{user.subject}}</td>
      </tr>

I want to know how to generate table structure like above

add in scope object and add those value using {{exampleObject.name}} in html table — Arpit Srivastava
– Arpit Srivastava, Commented Jun 19, 2015 at 4:11
It's not clear how you want your table to be presented given your json. Can you provide sample output? — sfletche
– sfletche, Commented Jun 19, 2015 at 4:22
I have edit my question.For single id I want to add multiple rows in subjects column. this is what i want @sfletche — Amina Yousuf
– Amina Yousuf, Commented Jun 19, 2015 at 4:29

Donal · Accepted Answer · 2015-06-20 02:47:48Z

You need to use ng-repeat-start and ng-repeat-end. For example:

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"
        }]
    }];

    $scope.users = users;
});

table { border-collapse: collapse; }
td { border: 1px solid Black; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
    <thead>
        <tr>
            <td>ID</td>
            <td>Subjects</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="user in users">
            <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>                    
        </tr>
        <tr ng-repeat-end ng-repeat="subject in user.subjects">
            <td>S{{subject.id}}</td>
        </tr>
    </tbody>
</table>

Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

sfletche · Accepted Answer · 2015-06-19 04:33:01Z

1

Similar to the nested structure of your object, you can nest your ng-repeats like this...

<tr ng-repeat = "user in users">
    <td>{{user.id}}</td>
    <td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

edited Jun 19, 2015 at 4:33

answered Jun 19, 2015 at 4:19

sfletche

50.1k32 gold badges110 silver badges120 bronze badges

Comments

Arulkumar · Accepted Answer · 2015-06-19 05:48:44Z

I split your JSON and push it into two $scope variable, like the below:

angular.forEach($scope.user, function(user) {
    $scope.userDetails.push({
      userId: user.id,
    });

    angular.forEach(user.subjects, function(subject) {
      $scope.subjectDetails.push({
        userId: user.id,
        subjectName: subject.name
      });
    });
});

In the HTML, I am using filter to filter by user's id.

<table>
  <thead>
    <tr>
      <th style="width: 50px">ID</th>
      <th style="width: 75px">Subjects</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in userDetails">
      <td><span ng-bind="user.userId"></span>
      </td>
      <td>
        <table>
          <tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
            <td>
              <div ng-bind="sub.subjectName"></div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

This is also one of the way to achieve this.

Sample Plunker

Arial · Accepted Answer · 2015-06-19 04:38:49Z

0

Here, I'm assuming that you want each user in users (in your JSON object) in one table, so you can do something as follows:

<table ng-repeat="user in users">
    <tr>
        <td>{{user.id}}</td>
        <td>Subjects</td>
    </tr>
    <tr ng-repeat="subject in user.subjects">
        <td>{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</table>

Adjust the html accordingly based on your needs, but this is the basic idea :)

Hope this helps!

answered Jun 19, 2015 at 4:38

Arial

5,0742 gold badges21 silver badges17 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2015-06-19 04:51:43Z

0

add users object in $scope.

$scope.users=[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

Here is the html.

 <table border="1">
  <tr>
    <th> ID   </th>
    <th>  subjects </th>
  </tr>
<tr ng-repeat="user in users">
     <td>{{user.id}}</td>
     <td><table>
       <tr ng-repeat="subject in user.subjects">
         <td>{{subject.name}}</td>
       </tr>
     </table></td>
  </tr>
  </table>

Here is the plunker

edited Jun 19, 2015 at 4:51

answered Jun 19, 2015 at 4:27

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

1 Comment

Amina Yousuf Over a year ago

For single Id I want to add multiple rows in subjects column , not just single td @RIYAJ KHAN

Collectives™ on Stack Overflow

Generate html table using angular

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related