Angular not loading data from external json

Question

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;
  });
}]);

Suren Srapyan · Accepted Answer · 2017-09-13 17:49:24Z

2

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.

edited Sep 13, 2017 at 17:49

answered Sep 13, 2017 at 17:32

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular not loading data from external json

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related