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

score 5 · Accepted Answer · edited May 23 '17 at 12:28

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?

ng-repeat in AngularJS not binding properly

1 Answers1