AngularJS (Loading JSON with custom Service)

Question

I'm trying to built a service for loading json files. What am I doing wrong?

The Service

app.service("jsonService", function ($http, $q)
{
    var deferred = $q.defer();

    $http.get('./assets/json/home.json').then(function (data)
    {
        deferred.resolve(data);
    });

    this.getHomeItems = function ()
    {
        return deferred.promise;
    }
})

My Controller

app.controller('homeController', function ($scope, jsonService) {

    var promise = jsonService.getHomeItems();
    promise.then(function (data)
    {
        $scope.home_items = data;
        console.log($scope.home_items);
    });

});

Console Error: $scope is not defined

In which line are you getting ~ Console Error: $scope is not defined? — Arun Ghosh
– Arun Ghosh, Commented Jul 19, 2016 at 16:01
I'm pretty sure you can just use $http to load a JSON file directly, you shouldn't need this service. Methods of $http return a promise, and the default response handler parses JSON. — Shaun Scovil
– Shaun Scovil, Commented Jul 19, 2016 at 16:05

κροκς · Accepted Answer · 2016-07-19 16:05:06Z

2

You are missing the dependency injection.

Your service should be:

app.service("jsonService", ["$http", "$q", function ($http, $q)
{
    var deferred = $q.defer();

    $http.get("./assets/json/home.json").then(function (data)
    {
        deferred.resolve(data);
    });

    this.getHomeItems = function ()
    {
        return deferred.promise;
    }
}]);

And your Controller:

app.controller("homeController", ["$scope", "jsonService", function ($scope, jsonService)
{
    var promise = jsonService.getHomeItems();
    promise.then(function (data)
    {
        $scope.home_items = data;
        console.log($scope.home_items);
    });
}]);

answered Jul 19, 2016 at 16:05

κροκς

5905 silver badges18 bronze badges

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

Comments

aenea · Accepted Answer · 2016-07-19 16:21:07Z

1

Without looking at the HTML, which you did not provide, I reckon you may not have injected the $scope into your controller constructor:

app.controller('homeController', ['$scope', function ($scope,  jsonService) {
    ...
}]);

Theoretically, AngularJS should be able to infer the dependency from the variable name, but according to the official documentation there are circumstances where this does not work and the practice of not explicitly injecting dependencies is discouraged. So you may want to try explicit injection (as shown above).

See the examples on the official docs here:

https://docs.angularjs.org/guide/controller

and here:

https://docs.angularjs.org/guide/di

answered Jul 19, 2016 at 16:21

aenea

212 bronze badges

Comments

Martin · Accepted Answer · 2016-07-19 16:14:48Z

0

You are have a common anti-pattern where you are unwrapping the promise returned by $http and then re-wrapping the data in a promise. This is unnecessary, just return the promise returned by $http.

this.getHomeItems = function () {
    return $http.get("./assets/json/home.json");
}

answered Jul 19, 2016 at 16:14

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Collectives™ on Stack Overflow

AngularJS (Loading JSON with custom Service)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related