Data is not populating in Table

Question

I am facing issue while displaying data in table.

I am using a customservice to fetch data from a json file and then inserting that data into $rootScope of an object.

But when I run the view,it comes blank with no errors.In the view,i am using below line of code in the view to iterate the array of objects "books"

Please guide me.

controller.js

Controllers.controller('BookListCtrl_Student', ['$scope','$rootScope','$http','$location','BookData',
function ($scope, $rootScope, $http, $location, BookData) {
    $rootScope.books=[];
    $rootScope.books.push(BookData.getData());
    $scope.bookLists = ['All Books', 'Available Books'];
    $scope.selection = $scope.bookLists[0];

    $scope.backToLogin = function() {
        $location.path("/main");
    }
}    
]);

customservice.js

Controllers.factory('BookData',['$http',function(http){
return {
    getData: function() {
        return http.get('data/books.json').then(function(result){               
            return result.data;               
            });
    }
};
}
]);

Answer 1

The problem is when you do $rootScope.books.push(BookData.getData()) it calls your getData() , but it never executes the promise. To fix it you would need to handle the promise within the controller and assign the data then.

customservice.js

return http.get('data/books.json');

controller.js

BookData.getData().then(function(resp){
   $rootScope.books.push(resp.data);
})

Heres a plunker with a quick example - https://plnkr.co/edit/ivdLd9wilmWW8oUnrMsh?p=preview