Passing $http data from service to controller (async)

Question

I'm learning Angular by making a weather app. So, In index.html I have a dropdown list.

<select ng-model="city" ng-options="city.cityName for city in cities" ng-change="getWheather()">
    <option value=""></option>
</select>

Depending on what city user selects from that list, he gets a weather forecast. It was all working perfectly while the function getWheather() was in the controller. Once I've put it in a factory, it is not longer working. I assume its because it is asynchronous, but I have no luck in fixing it.

This is the factory (in URL, numbers 45 and 15 should be city.latit and city.longit, but I can't get it to work. If I pass the value "city" to function getWheather(), it is undefined):

app.factory('wheatherService', function($http) {
  var getWheather = function(){
    var url ="https://api.forecast.io/forecast/api_key/"+45.815+","+15.966+"?callback=JSON_CALLBACK";
      return $http.jsonp(url);
  };

  return {
    getWheather: getWheather
  };
});

This is the controller:

app.controller('inputCtrl', function($scope, wheatherService){
  $scope.cities = [{ "cityName" : 'Paris', "latit" : 45.815399, "longit" : 15.966568},
                   { "cityName" : 'London', "latit" : 45.328979, "longit" : 14.457664},
                   { "cityName" : 'NewYork', "latit" : 43.510742, "longit" : 16.437489 }];

  wheatherService.getWheather().success(function(data){
    $scope.wheatherData = data;
      console.log($scope.wheatherData);
  });
});

So the main question is - is there and what is the way to get selected value from dropdown list to getWheather() function?

Sherlocked Nguyen · Accepted Answer · 2016-02-26 16:01:45Z

1

You still not bind Controller getWheather method to any function for later use in view.

$scope.getWheather = getWheather;

Then you call the promise on getWheather method

function getWheather(city){
    wheatherService.getWheather(city).success(function(data){
        $scope.wheatherData = data;
        console.log($scope.wheatherData);
  });
}

In you view ng-change should pass city as parameter

ng-change="getWheather(city)"

answered Feb 26, 2016 at 16:01

Sherlocked Nguyen

5943 silver badges8 bronze badges

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

Comments

Katana24 · Accepted Answer · 2016-02-26 15:43:34Z

0

Pass the city object to function.

ng-change="getWheather(city)"

answered Feb 26, 2016 at 15:43

Katana24

8,97920 gold badges81 silver badges120 bronze badges

Comments

Leo · Accepted Answer · 2016-02-26 16:37:36Z

0

Keep in mind that in the view you should call the functions from the controller and the controller should be the one communicating with the factory.

But, to try answering your question, if you pass city to getWheather it will be undifined since you are not accepting any parameters inside your getWheather function.

var getWheather = function(){... should be var getWheather = function(city){...

and then in the factory you should try something like this.

var url ="https://api.forecast.io/forecast/api_key/"+ city.latit +","+ city.longit +"?callback=JSON_CALLBACK";

Hope this works for you =D!

answered Feb 26, 2016 at 16:37

Leo

4825 silver badges9 bronze badges

Collectives™ on Stack Overflow

Passing $http data from service to controller (async)

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