ng-repeat unable to retrieve data from array of Objects

Question

my Controller says:

app.controller("PatientsController",function ($scope, $sce, $http,$window,$timeout){
             var myScope = $scope;
             myScope.PatientList = []; 
             myScope.getPatients = function () {
                 $http.get('http://my-ip/dashboard/patientlist').then(function(data){
                     myScope.PatientList = data.data;
                     console.log(myScope.PatientList );

                 });
             };
             myScope.getPatients();
         });

console.log has:

[{
    "appointmentcount": "7",
    "name": "A",
    "phonenumber": "B",
    "dateregistered": "2017-01-04 15:20:08"
}, {
    "appointmentcount": "27",
    "name": "C",
    "phonenumber": "D",
    "dateregistered": "2017-01-04 15:43:51"
}]

trying to retrieve it using ng-repeat is not giving any output:

<table class="table table-bordered table-condensed table-striped">
<div  ng-repeat="pp in PatientList">
<tr>
<td>{{pp.name}} </td>
</tr>
</div> <!-- div ends -->
</table>

any idea what am I missing?

using http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

Do you have ng-app and ng-controller correctly setup in HTML? — Sajal
– Sajal, Commented May 4, 2017 at 12:06

Sajeetharan · Accepted Answer · 2017-05-04 12:10:32Z

3

The problem is with your table tag , do the ng-repeat on the tr tag instead of div. Also make sure you have added ng-app and ng-controller.

 <table>
      <tr ng-repeat="x in PatientList">
        <td>{{ x.name }}</td>
        <td>{{ x.phonenumber }}</td>
      </tr>
 </table>

DEMO

var app = angular.module("myApp", []);
app.controller("PatientsController", function($scope) {
 var myScope = $scope;
 myScope.PatientList = []; 
 myScope.PatientList =  [{
    "appointmentcount": "7",
    "name": "A",
    "phonenumber": "B",
    "dateregistered": "2017-01-04 15:20:08"
}, {
    "appointmentcount": "27",
    "name": "C",
    "phonenumber": "D",
    "dateregistered": "2017-01-04 15:43:51"
}];
});

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

<body ng-app="myApp" ng-controller="PatientsController">
<table>
  <tr ng-repeat="x in PatientList">
    <td>{{ x.name }}</td>
    <td>{{ x.phonenumber }}</td>
  </tr>
</table>
</body>
</html>

edited May 4, 2017 at 12:10

answered May 4, 2017 at 12:07

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Satya Over a year ago

you just saved me a life and earned a beer man :) Thanks a ton

benams Over a year ago

That's true. Next time copy your generated html and not only the template.

Mistalis · Accepted Answer · 2017-05-04 12:09:53Z

1

You should not use ng-repeat on a <div> inside a <table>. You may want to repeat on a <tr>.

<table class="table table-bordered table-condensed table-striped">
  <tr ng-repeat="pp in PatientList">
    <td>{{pp.name}}</td>
  </tr>
</table>

Working JSFiddle

answered May 4, 2017 at 12:09

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Collectives™ on Stack Overflow

ng-repeat unable to retrieve data from array of Objects

2 Answers 2

2 Comments

Working JSFiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related