ng-repeat rendering empty li elements

Question

I am using ng-repeatto loop through the Rotten tomatoes api and display the movie title. This is the code I have

JS:

var app = angular.module('app', []);

app.controller('ApiCtrl', function($http){
var app = this;
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$http.get(url+key)

.success(function(data) {
  app.movies = data;
  console.log(data);
 })   
})

HTML:

<li ng-repeat="movie in app.movies">
    {{movie.title}}
</li>

</body>

This is outputting 3 blank li elements on the screen, if I call just {{movie}}then the entire object is outputted so I know the binding is correct.

An example of the JSON:

"movies": [
{
  "id": "771315918",
  "title": "Divergent",
}]

tie `app.movies` to the scope instead, to activate the digest cycle (i.e. `$scope.movies`) — Eliran Malka, Mar 30 '14 at 22:56

score 1 · Answer 1 · answered Mar 30 '14 at 22:55

1

The rotten tomatoes API has it's own movies key, so I think you need to do:

.success(function(data) {
  app.movies = data.movies;
}

answered Mar 30 '14 at 22:55

dave

62,300
5
72
93

score 1 · Accepted Answer · answered Mar 30 '14 at 22:59

1

Where's your $scope?

Try something like:

var app = angular.module('app', []);

app.controller('ApiCtrl', function($scope, $http){
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$scope.movies = $http.get(url+key);

I'm not sure if the above code will work of $http. My suggestion is that before trying to get the data from a server, get all the angular stuff working. For instance, define $scope.movies like this:

$scope .movies =  [
    {
      "id": "771315918",
      "title": "Divergent",
    }
];

first and get that working.

answered Mar 30 '14 at 22:59

zumalifeguard

8,648
5
43
56

I think the $http.get() will return the promise of an object, but not the object itself. – jOshT Mar 30 '14 at 23:05
jOshT, but that's okay. The view should just bind to the promise, and it gets automatically updated when the data gets to the cleint. You don't need to do the .success stuff unless you have actual additional processing. That's common, but not in this case. – zumalifeguard Mar 30 '14 at 23:43
Cool, I wasn't sure with Angular. Thanks for the response. – jOshT Mar 31 '14 at 00:36

score 1 · Answer 3 · edited May 23 '17 at 12:11

1

$scope and 'this' don't necessarily refer to the same thing. I would do

$scope.app = null;

//When the deferred object is returned
.success(function (data) {
    $scope.app = data;
});

By using 'this' you are referring to the controller but is not accessible by the view. Here is another post that is really helpful:

'this' vs $scope in AngularJS controllers

edited May 23 '17 at 12:11

Community

1
1

answered Mar 30 '14 at 22:59

jOshT

1,525
1
11
15

ng-repeat rendering empty li elements

3 Answers3