I am currently facing an issue with my assignment in the controller where $scope.getForecastByLocation is not being passed through properly. The problem lies in the fact that the variable city is hardcoded to a random city like "Berkeley", and this city value is then passed to the Data factory. However, the intention is for the user to input a new city, which should then be sent as a parameter to the Data factory.
Despite my efforts of using console.logs, I can see that the button is functioning correctly. However, when calling Data.getApps($scope.inputcity);, it does not work as expected, resulting in the city always being set as "Berkeley".
If anyone can identify why I'm unable to send a new city parameter to the Data factory, I would greatly appreciate it! Thank you!
In my HTML file:
<input ng-model="city">
</md-input-container>
<md-button class="md-raised" ng-click="getForecastByLocation(city)">SUBMIT</md-button>
In my controller.js file:
var app = angular.module('weatherApp.controllers', [])
var city = 'Berkeley';
app.controller('weatherCtrl', ['$scope','Data',
function($scope, Data) {
$scope.getForecastByLocation = function(city) {
$scope.inputcity = city;
console.log($scope.inputcity);
Data.getApps($scope.inputcity).then(function(data){
$scope.data = data;
$scope.name = data.name;
console.log($scope.data); //object shows "Berkeley"
console.log($scope.name);
});//initiate Data.getApps by passing in a new city
}
Data.getApps(city).then(function(data) {
$scope.data = data;
var vm = $scope;
vm.description = data.weather[0].description;
vm.speed = (2.237 * data.wind.speed).toFixed(1) + " mph";
vm.name = data.name;
vm.humidity = data.main.humidity + " %";
vm.temp = data.main.temp;
vm.fTemp = (vm.temp * (9 / 5) - 459.67).toFixed(1) + " °F";
},function(res) {
if(res.status === 500) {
// server error, alert user somehow
} else {
// probably deal with these errors differently
}
}
); // end of function
}])//end of controller
In my service.js file:
app.factory('Data', function($http, $q) {
var data = [],
lastRequestFailed = true,
promise;
return {
getApps: function(city) {
if(!promise || lastRequestFailed) {
// $http returns a promise, so we don't need to create one with $q
promise = $http.get('http://api.openweathermap.org/data/2.5/weather?',{
params: {
q: city,
}
})
.then(function(res) {
lastRequestFailed = false;
data = res.data;
return data;
}, function(res) {
return $q.reject(res);
});
}
return promise;
}
}
});
A recent edit has been made to my controller code based on suggestions from others. Here is what the updated code looks like:
app.controller('weatherCtrl', ['$scope','Data',
function($scope, Data) {
$scope.city = 'Berkeley';
$scope.getForecastByLocation = function() {
console.log($scope.city); //making sure I can read the input
console.log('this is your input ' + $scope.city);
Data.getApps($scope.city).then(function(data){
console.log('this is your output ' + $scope.city); //should say "This is your output "tracy", but it still reads at "Berkeley"
$scope.data = data;
$scope.name = data.name;
console.log($scope.data); //object shows "Berkeley"
console.log($scope.name);
});//initiate Data.getApps by passing in a new city
}