Struggling to grasp the inner workings of AngularJS while attempting my initial API calls, I hit a roadblock.
I'm aiming to execute 2 API calls but can't seem to get it right.
Following the first $http.get, I intend to make another call (using the data from the previous call) but it's not functioning as expected. (No alert is being triggered)
The retrieval of city and country data works seamlessly after the initial .get operation
JavaScript Code:
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 receive a value at this point
alert("1")
});
});
})
HTML Structure:
<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>