CODEWITHSUNDEEP
angularjs
user1937021
user1937021

Reputation: 10801

Angular not loading data from external json

Not sure what I have wrong here in this setup to simply display books in a json, I think it might be the view or the controller that may be wrong, but I'm unsure. Thanks for any help.

<div class="book col" ng-repeat="book in myBooks">
     <h3 class="title">{{book.title}}</h3>
     <p class="author">{{book.author}}</p>
  </div>

services.js

app.factory('books', ['$http', function($http) {
  return $http.get('books.json')
    .success(function(data) {
        return data;
    })
    .error(function(err) {
        return err;
  });
}]);

books.json

    {
   "per_page":20,
   "page":1,
   "total_pages":1468,
   "total_results":29346,
   "books":[
      {
         "uuid":"235b68e4-5b16-4a25-b731-45c7e67c351e",
         "id":98024,
         "title":null,
         "author":null,
         "language":null,
         "createtime":"2016-05-19T13:09:40.963+00:00"
      },
      {
         "uuid":"5e87daca-e87b-4324-a652-e06d5349bd82",
         "id":98055,
         "title":null,
         "author":null,
         "language":null,
         "createtime":"2016-05-23T15:50:11.777+00:00"
      }

Controller.js

app.controller('BookshelfController', ['$scope', 'books',  function($scope, books) {
    books.success(function(data) {
    $scope.myBooks = data;
  });
}]);

Upvotes: 0

Views: 37

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68685

Return from your factory an object which contains your function, calling which will return you the result of $http.get()

app.factory('books', ['$http', function($http) {
    return {
         getBooks: function() {
            return $http.get('books.json');
         }
    };
}]);

Because $http.get returns a Promise object, in your controller use then to get the results from the response.

app.controller('BookshelfController', ['$scope', 'books',  function($scope, books) {
    books.getBooks().then(function (data) {
        $scope.myBooks = data;
    }, function (err) {
        console.log(err);
    });
}]);

Also check your url to be correct.

Upvotes: 2

Related Questions