CODEWITHSUNDEEP
angularjsjsonservice
Kamal
Kamal

Reputation: 2180

call data from service in controller using angular 1.5

Hi Friends I am new in angular and figuring out that how to call data from service to controller. Please check my code below

data.json

[{
    "brandname" : "VU",
    "image" : "images/1.jpeg",
    "detail" : "Vu 102cm (40) Full HD LED TV",
    "price": "20,000",
    "productId" : "001"

},{
    "brandname" : "Micromax",
    "image" : "images/52.jpeg",
    "detail" : "Micromax 81cm (31.5) HD Ready LED",
    "price": "12,489",
    "productId" : "052"

}]

contoller.js

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

appProduct.service('productlist', ['$scope', function($scope){
  $http({method : 'GET',url : 'js/data.json'})
            .success(function(data, status) {
                $scope.items = data;
                //console.log(data)
            })
            .error(function(data, status) {
                alert("Error");
            });
        setTimeout(function(){
          $scope.$apply();
        },1);
}])



appProduct.controller('productGrid', function($scope, $http, productlist){

  $scope.item = productlist.items;
  console.log(productlist.items)

})

Above mention code giving me error in console Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- productlist. Please help my guys

Upvotes: 0

Views: 91

Answers (2)

Shikha thakur
Shikha thakur

Reputation: 1289

@Kamal,You need to inject $http in your service. Could you remove $scope from your service.. Make sure dependency is defined and will fix the problem

Upvotes: 0

itachi
itachi

Reputation: 3597

You cannot inject $scope to service, because it can be bound only to controller. $scope.$apply() should be called from the controller when the service finishes its job.

Additionally - get rid of "success" and "error" methods, they're deprecated:

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

Your code should looks like below:

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

appProduct.service('productlist', ['$http', function($http) {
    return {
        getProducts: function() {
            return $http.get('js/data.json')
                .then(function(response) {
                    return response.data;
                }, function() {
                    return "Error while fetching data";
                });
        }
    }
}]);



appProduct.controller('productGrid', ['$scope', '$http', '$timeout', 'productlist', function($scope, $http, $timeout, productlist) {
    productlist.getProducts().then(function(data) {
        $timeout(function() {
            $scope.items = data;
        });
    }, function(data) {
        console.log(data);
    });
}]);

Here is the Plunker of this working: Plunker

Service is returning a promise from $http call. Then, in controller, we can resolve the data and manipulate with the scope.

Upvotes: 1

Related Questions