AngularJS - controller doesn't get data from service when using $http

Question

I have simple web app where I like to load some data from json. At the moment the data is hardcoded within my service and everything is working.

When I change my service to load the same data from an external json file the controller renders the view before it gets some data.

That's what it looks like now:

function() {
var tripsService = function() {

var trips = [{ .... SOME DATA }];

this.getTrips = function() {
            return trips;
        };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

Using $http.get :

function() {
var tripsService = function() {

 var trips = [];

this.getTrips = function() {

$http.get('trips.json').success(function (data) {
            var trips = data;
            return trips;
           });
     };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

Here is my Plunker:

plnkr

What can I do to change this ? I have read something about adding resolve property to my routeProvider but I wasn't able to solve the problem !

Update: Maybe my description wasn't precise enough and I have to learn some more about handling data ! The data from json should just load once, so that any view change wouldn't reload the original json file.

thanks

DanEEStar · Accepted Answer · 2015-05-21 09:42:03Z

4

You have to learn about promises: http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

In the service you should return directly the promise of the call to the $http-Service:

    this.getTrips = function() {
         return $http.get('trips.json').then(function (response) {
            trips = response.data;
            return trips;
          });
    };

In the controller you have then to call the then-method to access the data from the service:

    function init() {
        tripsService.getTrips().then(function(trips) {
          $scope.trips = trips;
        })
    }

Here is a updated Plunker with a working example: http://plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview

answered May 21, 2015 at 9:42

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

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

4 Comments

phil-k Over a year ago

Thanks for your advice. But now my data is loaded everytime I go back to Trips, which makes any changes useless I made in the edit section ! As I imported the data hardcoded I could change my data !

DanEEStar Over a year ago

Then you simply have to check if you loaded the data already before you reload them

phil-k Over a year ago

I tried something like this: var loaded = false; this.getTrips = function() { if(loaded == false){ return $http.get('trips.json').then(function (response) { trips = response.data; var loaded = true; return trips; }); } else { return trips; alert('test'); } }; -----> doesn't work ! Maybe you have any tip ?

DanEEStar Over a year ago

I updated the Plunkr: plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview Here I cache the data in the service. Take a look at: github.com/iterativ/angularjsbestpracticesapp for a bigger example

Bob Thomas · Accepted Answer · 2015-05-21 09:33:38Z

0

If you want to load the view when you retrieved the content you indeed need a route resolve.

You can do that by.

$routeProvider
.when("/someRoute", {
    templateUrl: "sometemplat.html",
    controller: "someController",
    resolve: {
        trips: function(tripsService){
            return tripsService.getTrips();
       }
   }
})

This will resolve a variable called trips into the controller.

you need to add the trips to your controller dependencies.

And if everything works trips should be filled with the data from the api.

answered May 21, 2015 at 9:33

Bob Thomas

2821 silver badge8 bronze badges

Collectives™ on Stack Overflow

AngularJS - controller doesn't get data from service when using $http

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related