ng-repeat in AngularJS not binding properly

Question

I am trying to render a html table with a list populated from my controller. This is what I am doing:

//Home Controller app.controller("HomeController", function ($scope, $location, ExamService, AuthenticationService, $cookieStore) { $scope.items = '[{"id":"1","title":"Test 1","description":"this is a description"}]'; });

and in the page:

 <table class="table" ng-controller="HomeController"> <th>Id</th> <th>Title</th> <th>Description</th> <tr ng-repeat="item in items"> <td>{{item.id}}</td> <td>{{item.title}}</td> <td>{{item.description}}</td> </tr> </table>

However this generates as a blank table with 109 tr nodes...what I am doing wrong? please help

Community · Accepted Answer · 2017-05-23 12:28:43Z

The problem is $scope.items is a string literal.

Instead, use an array literal:

 $scope.items = [{"id":"1","title":"Test 1","description":"this is a description"}];

Or shorter:

 $scope.items = [{id: 1,"title":"Test 1",description:"this is a description"}];

( fiddle )

Why does this confusion happen?

In my opinion this happens because people often confuse JSON - the data exchange format (which in JS you store in strings)and JavaScript object literals. [] is for an array object literal both in the JS language and with the JSON data exchange format. See What are the differences between JSON and JavaScript object?

Collectives™ on Stack Overflow

ng-repeat in AngularJS not binding properly

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related