How to repeat an array in angular js

Question

How to ng-repeat an array in angular, I want to loop gpa in my view.

   [
  {
    "id": 1,
    "name": "Pre-Algebra",
    "selected": true,
    "gpa": [
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      },
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      }
    ]
  },
  {
    "id": 2,
    "name": "Pre-Calculus",
    "selected": true
  }
]

View Code:

 <div ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected  : true} track by $index">
 <table class="academy-table gpa-table" ng-class="!ctrl.editAcademyToggle?'data-view':''">
        <tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
            <td>
                <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
            </td>
        </tr>
</table>
    </div>

Where I am doing wrong?

Satpal · Accepted Answer · 2017-07-10 09:18:51Z

4

You don't need to use $index in the ngRepeat expression

Use

<tr ng-repeat="gpa in course.gpa"

instead of

<tr ng-repeat="gpa in course.gpa[$index]"

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  this.subjectCourseGrades = [{
    "id": 1,
    "name": "Pre-Algebra",
    "selected": true,
    "gpa": [{
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      },
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      }
    ]
  }];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl as ctrl">
    <div ng-repeat="course in ctrl.subjectCourseGrades | filter: {selected  : true} track by $index">
      <table class="academy-table gpa-table">
        <tr ng-repeat="gpa in course.gpa" class="ots-data">
          <td>
            <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

edited Jul 10, 2017 at 9:18

answered Jul 10, 2017 at 6:22

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

5 Comments

Mohammad Fareed Over a year ago

its an Array, i tried your code at the beginning, its not showing records in Loop.

Satpal Over a year ago

@Developer, As per updated code ng-repeat="gpa in course.gpa" should work, Test once with removing ng-if="!ctrl.editAcademyToggle"

Mohammad Fareed Over a year ago

Yes i Tried, when i check {{course.gpa | json}} its coming, when i try {{gpa | json}} inside loop its not showing anything

Mohammad Fareed Over a year ago

Can Update your Code Snippet with my json Object.

Satpal Over a year ago

@Developer, Sure; can you share the subjectCourseGrades data structure? see the updated snippet

Ved · Accepted Answer · 2017-07-10 08:05:51Z

1

Remove $index from ng-repeat

<tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
            <td>
                <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
            </td>
        </tr>

Edit1 : After looking to your question, it seems you are using controller as instead $scope. You need this:

<tr ng-repeat="gpa in ctrl.course.gpa"></tr>

Edit 2: div is not a valid table element. This may be the reason for not working. Use tbody .

<tbody ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected  : true} track by $index">
    <tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
        <td>
            <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
        </td>
    </tr>

edited Jul 10, 2017 at 8:05

answered Jul 10, 2017 at 6:23

Ved

12.1k5 gold badges46 silver badges61 bronze badges

1 Comment

Ved Over a year ago

Why you are using div inside table. Div is not a valid table element. This may be the reason for not working

Collectives™ on Stack Overflow

How to repeat an array in angular js

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related