AngularJS + API call

Question

Trying to understand how AngularJS works, doing my first API calls, when I got stuck.
I want to do 2 API calls, but I can't seem to make it work.

After the first $http.get I want to do an another call (using the information from the previous call) but that doesn't work for some reason. (I get no alert)

The city and country are working perfectly after the first .get

JS:

var app = angular.module('weather', []);

app.controller("weatherCtrl", function($scope, $http) {
    $http.get("http://ipinfo.io/json").then(function(response) {
        $scope.city = response.data.city;
        $scope.country = response.data.country;  

        var apiKey = "";
        var apiCall = "api.openweathermap.org/data/2.5/weather?q=" + response.data.city + "&APPID=" + apiKey;   

        $http.get(apiCall).then(function(responsew) {
            // $scope.temperature would get a value here
            alert("1")
        });
    });
})

HTML:

<body ng-app="weather" ng-controller="weatherCtrl">
    <h1 class="text-center">Weather</h1>
    <h2 class="text-center">{{city}}, {{country}}</h2>
    <h2 class="text-center">{{temperature}} °C</h2>
</body>

I think you need to add the http protocol to your second url. — artemisian
– artemisian, Commented Mar 11, 2017 at 5:50

Sajeetharan · Accepted Answer · 2017-03-11 05:56:34Z

2

You can use promise to call the request after another which is the recommended way to do,

Another thing is you are missing the http part in the second request

Code:

app.controller("weatherCtrl", function ($scope, $http) {

    function infoReq() {
        return $http({
            method: 'Get',
            url: 'http://ipinfo.io/json'
        })
    }

    function weatherReq() {
        var apiKey = "";
        var apiCall = "http://api.openweathermap.org/data/2.5/weather?q=" + $scope.city + "&APPID=" + apiKey;
        return $http({
            method: 'Get',
            url: apiCall,
        })
    }

    $scope.makeRequest = function () {
        infoReq()
            .then(function (response) {
                $scope.city = response.data.city;
                $scope.country = response.data.country;
                return weatherReq();
            })
            .then(function (response) {
                console.log(response.data);
            })


    }

})

answered Mar 11, 2017 at 5:56

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Par4doXon Over a year ago

Just one question. What is the purpose of the $scope.makeRequest? Wouldn't be enough just to call infoReq()?

Arvind CR · Accepted Answer · 2021-05-27 18:12:54Z

0

var req = {
 method: 'POST',
 url: "http://api.openweathermap.org/data/2.5/weather?q=" + $scope.city + "&APPID=" + apiKey;
 headers: {
   'Content-Type': undefined
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

You can use the above http service to make the request inside your angularjs controller.

answered May 27, 2021 at 18:12

Arvind CR

111 bronze badge

Collectives™ on Stack Overflow

AngularJS + API call

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related