AngularJS rows are displayed with empty data

Question

I am testing out angularJS.

In app.js I have

function ListCtrl($scope, Restangular) {
   Restangular.all("employee").getList().then(function(employee) {
     $scope.employee = employee;
     console.log($scope.employee.emp);
   });
}

and in html I have

<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Emp No</th>
<th>Name</th>
<th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee | filter:search | orderBy:'ename'">
<td><a href="{{employee.empno}}" target="_blank">{{employee.empno}}</a>
</td>
<td>{{employee.ename}}</td>
<td>
<a href="#/edit/{{employee.ename}}"><i class="icon-pencil"></i></a>
</td>
</tr>
</tbody>
</table>

Problem I am facing is there are empty rows being displayed with no data being displayed. What could be the reason for this?

Edit 1

JSON returned from server

{"emp":[{"empno":"7369","ename":"SMITH","hiredate":
"1980-12-17T00:00:00+03:00","job":"CLERK","mgr":"7902","sal":"800"},
{"comm":"300","empno":"7499","ename":"ALLEN","hiredate":
"1981-02-20T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1600"},
{"comm":"500","empno":"7521","ename":"WARD","hiredate":
"1981-02-22T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1250"},
{"empno":"7566","ename":"JONES","hiredate":
"1981-04-02T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2975"},
{"comm":"1400","empno":"7654","ename":"MARTIN","hiredate":
"1981-09-28T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1250"},
{"empno":"7698","ename":"BLAKE","hiredate":
"1981-05-01T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2850"},
{"empno":"7782","ename":"CLARK","hiredate":
"1981-06-09T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2450"},
{"empno":"7788","ename":"SCOTT","hiredate":
"1987-04-19T00:00:00+03:00","job":"ANALYST","mgr":"7566","sal":"3000"},
{"empno":"7839","ename":"KING","hiredate":
"1981-11-17T00:00:00+03:00","job":"PRESIDENT","sal":"5000"},
{"comm":"0","empno":"7844","ename":"TURNER","hiredate":
"1981-09-08T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1500"}]}

console log from chrome browser

[Object, Object, Object, Object, Object, Object, Object, Object, 
Object, Object, Object, Object, Object, Object, route: "employee",
getRestangularUrl: function, addRestangularMethod: function, one:
function, all: function…]
0: Object
empno: "7369"
ename: "SMITH"
hiredate: "1980-12-17T00:00:00+03:00"
job: "CLERK"
mgr: "7902"
sal: "800"

Use firebug or chrome dev tools to see the actual data that your app is receiving from the server. Does it look like what you expect? — Vincent Ramdhanie
– Vincent Ramdhanie, Commented Nov 25, 2013 at 19:09
Does the number of empty rows correspond to the number of employees you're expecting? — Paul Sasik
– Paul Sasik, Commented Nov 25, 2013 at 19:11
@PaulSasik Yes it does match the number of rows I receive from server — Jacob
– Jacob, Commented Nov 25, 2013 at 19:14
@VincentRamdhanie I have included JSON which received from server. — Jacob
– Jacob, Commented Nov 25, 2013 at 19:15

mfollett · Accepted Answer · 2013-11-25 19:21:57Z

3

Based on the JSON you've included it looks like $scope.employee should contain a one key called "emp", which is what you print to the console. You might need to change your ng-repeat to work with that.

Also, I'm unfamiliar with the form of your ng-repeat expression. I believe they are supposed to follow a form similar to "something in somethings" so in this case instead of just employee you may want that to be employee in employee.emp.

In a more general sense, the Angular Batarang plugin for Chrome is infinitely helpful for solving these sorts of problems.

answered Nov 25, 2013 at 19:21

mfollett

1,81416 silver badges27 bronze badges

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

1 Comment

Jacob Over a year ago

Spot on employee in employee.emp does the trick. Thanks a ton.

Collectives™ on Stack Overflow

AngularJS rows are displayed with empty data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related