How to bind the array data in ng-repeat using AngularJS

Question

I am using angularjs, I have following set of data that I need to bind to a table using ng-repeat. I tried thus but I am not able to reach my output my data in sub array so I am not able to bind this in repeat, anyone help how to do this .

data

 $scope.SubData=[{
    Name: '1',
    Subject: [{
        tamil: 12,
        english: 21,
        social: 45
    }]
},
{
    Name: '2',
    Subject: [{
        tamil: 10,
        english: 20,
        social: 30,
        geo: 40
    }]
}]

Expected output should look like this

NOTE:Subject Names are Dynamically

Show what you have tried so far. ie. HTML. So that we can correct your mistkes. — Sai
– Sai, Commented Jun 12, 2017 at 11:10
that subjects are dynamically i am not able to mention column names so i put it one one td whole subject — jose
– jose, Commented Jun 12, 2017 at 11:11
@jose i think you need to correct your data As $scope.SubData=[{Name:'1',Subject:[{SubjectName:'tamil',marks:12,}] something like this — Jenny
– Jenny, Commented Jun 12, 2017 at 11:23

Sai · Accepted Answer · 2017-06-12 11:23:26Z

2

You can do like this:

<table ng-repeat="stu in SubData">
  <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(key, val) in stu.Subject[0]">
        {{key}}:{{val}}
     </td>
  </tr>
</table>

Here is the plunker

Hope this helps.

answered Jun 12, 2017 at 11:23

Sai

2,6685 gold badges34 silver badges49 bronze badges

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

Comments

Sangwin Gawande · Accepted Answer · 2017-06-13 11:39:45Z

1

Try This, It's exactly what you need :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th,
    td {
        padding: 5px;
        text-align: left;
    }
    table#t01 tr:nth-child(even) {
        background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {
        background-color: #fff;
    }
    table#t01 th {
        background-color: black;
        color: white;
    }
</style>

<body ng-app="myApp" ng-controller="myCtrl">

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Subject</th>
        </tr>
        <tr ng-repeat="x in SubData">
            <td>{{ x.Name }}</td>
            <td><label ng-repeat="(key, value) in x.Subject"><label ng-repeat="(k,z) in value">{{k}} - {{z}}<label ng-show="!$last"> ,</label> <br></label></label>
            </td>
        </tr>
    </table>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.SubData = [{
                    Name: '1',
                    Subject: [{
                        tamil: 12,
                        english: 21,
                        social: 45
                    }]
                },
                {
                    Name: '2',
                    Subject: [{
                        tamil: 10,
                        english: 20,
                        social: 30,
                        geo: 40
                    }]
                }
            ]
        });
    </script>
</body>
</html>

Output :

edited Jun 13, 2017 at 11:39

answered Jun 12, 2017 at 11:10

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

6 Comments

jose Over a year ago

Subject Names are Dynamically @Sangwin Gawande

jose Over a year ago

but u mention the subject names right y.taml y. english in dynamic means how should i mention that

Sangwin Gawande Over a year ago

Try above code, I have updated it, It will take dynamic subjects

jose Over a year ago

i need to remove last comma how to do this like tamil: 10, english: 20, social: 30, geo: 40,?

Sangwin Gawande Over a year ago

Done, Check updated code, last comma removed.<label ng-show="!$last"> ,</label>

|

Newbie · Accepted Answer · 2017-06-12 11:38:39Z

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td style="border: 1px solid black">Name</td>
    <td style="border: 1px solid black">Subject</td>
    </thead>
    <tbody>
      <tr  ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

Mohideen bin Mohammed · Accepted Answer · 2017-06-12 11:42:43Z

1

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td>Name</td>
    <td>Subject</td>
    </thead>
    <tbody>
      <tr ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

You can do double iteration . i mean 2 ng-repeat to achive it..

one for overall list,

<table ng-repeat="stu in SubData">
   <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
</table>

edited Jun 12, 2017 at 11:42

answered Jun 12, 2017 at 11:11

Mohideen bin Mohammed

20.4k11 gold badges121 silver badges131 bronze badges

4 Comments

jose Over a year ago

i am also try in ng-repeat @Mohideen ibn

jose Over a year ago

make me as a fiddle it can easily understood

Mohideen bin Mohammed Over a year ago

check my fiddle

jose Over a year ago

stackoverflow.com/questions/44500723/… @help

Collectives™ on Stack Overflow

How to bind the array data in ng-repeat using AngularJS

data

4 Answers 4

Comments

6 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

data

4 Answers 4

Comments

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related