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

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

Answer 1

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/

Answer 2

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>

Answer 3

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

Answer 4

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!

Answer 5

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

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