Requesting JSON data with AJAX. I don't see result

Question

I'm learning Angular JS. Why I don't see any result?

Here is my example:

HTML:

...
<div ng-controller="PostsCtrl">
    <ul ng-repeat="post in posts">
      <li>{{post.desc}}</li>
    </ul>
  </div>
...

JS:

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

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('http://www.site.com/post?format=json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

JSON from http://www.site.com/post?format=json :

{"book": [{"added": "2013-10-09T15:16:45", "desc": "Expert Python Programming shows how Python development should be done with best practices and expert design tips.", "id": 2, "isbn": "ISBN-10: 1430258098", "link": "http://www.amazon.com/Pro-Django-Marty-Alchin/dp/1430258098/ref=sr_1_43?ie=UTF8&qid=1372941168&sr=8-43&keywords=django", "price": "32", "read_pages": 124, "resource_uri": "/api/book/2/", "title": "Pro Django", "total_pages": 376, "user": "/api/user/1/"}, {"added": "2014-01-17T15:25:34", "desc": "asdg", "id": 3, "isbn": "555", "link": "http://www.fb.pl/", "price": "5", "read_pages": 5, "resource_uri": "/api/book/3/", "title": "asdg", "total_pages": 5, "user": "/api/user/1/"}], "meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 2}}

Answer 1

Try this:

success(function(data, status, headers, config) {
    $scope.posts = data.book;
})

Answer 2

When data within a scope is being changed outside of regular AngularJS events like ng-click then you need to manually call $scope.$apply() to apply any changes within the scope.

Also, as karaxuna suggested you should read the book property from the json result

This should work:

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

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('http://www.site.com/post?format=json')
    .success(function(data, status, headers, config) {
        // Manually apply changes here
        $scope.$apply(function() {
            $scope.posts = data.book;
        });
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

See this blogpost which describes it in more detail: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html