I am trying to do the following, a query to 2 apis.
The first query is to fetch the data from a locality given a city, I handle it with promises.
The second query is to retrieve from that data 7 more data given longitude, latitude and date, I did it using an IIFE, so I tried to do it with $resource but no matter how hard I tried I couldn't solve problems with the json parsing.
Here is the code that makes the query to the api to fetch the data and update the forecast model, there are 2, one for when the location changes and the other that directly calls the function that fetch the data.
$scope.setLocation = function(loc) {
$scope.location = loc;
$scope.getForecastByLocation();
};
$scope.getForecastByLocation = function(p) {
if ($scope.location == '' || $scope.location == undefined) {
$scope.hasState = 'has-warning';
$scope.message = 'Please provide a location';
}
$scope.hasState = 'has-success';
console.log("LOCACION==",$scope.location);
$scope.forecast = openWeatherMap.queryForecastDaily({
location: $scope.location
});
$scope.forecast.$promise.then(function(data){
for(var i=0;i<data.list.length;i++){
(function(i) {
var fecha=Date(data.list[i].dt);
var fecha2=new Date(fecha);
if(fecha2.getDate()+(i-1)<10){
var dias="0"+(fecha2.getDate()+(i-1));
}
else{
dias=fecha2.getDate()+(i-1);
}
var fechax=fecha2.getFullYear()+"-"+fecha2.getMonth()+"-"+dias+"Z";
var lon=parseInt(data.city.coord.lon);
var lat=parseInt(data.city.coord.lat);
var url="http://api.openweathermap.org/v3/uvi/"+lat+","+lon+"/"+fechax+".json?appid=943d3a75c72ea297aa73f129275d2140";
$http.get(url)
.success(function (dat) {
data.list[i].radiacion=dat.data;
console.log("Sucesss=",$scope.forecast.list[i].radiacion)
});
})(i);
}
});
}
This is the part of the code that executes the location change setLocation(item) and at the same time makes the query to the apis , it executes fine when I click it from
<div class="col-xs-12">
<div>
<h1>Listado de ciudades importantes</h1>
<div class="form-inline" role="form">
<span class="btn-group" >
<button ng-repeat="item in exampleLocations | orderBy:'name':true" ng-click="setLocation(item)" type="submit" class="btn btn-default">{{item}}</button>
</span>
<br><br><br><br>
<span class="form-group {{hasState}}">
<label class="sr-only" for="location">Ciudad</label>
<input ng-model="location" ng-enter="getForecastByLocation(location)" type="text" class="form-control" id="location" placeholder="Ciudad">
</span>
<button class="btn btn-primary " ng-click="getForecastByLocation(location)">Buscar!</button>
<span ng-show="message" class="alert"><span class="glyphicon glyphicon-arrow-left"> </span>{{message}}</span>
</div>
</div>
</div>
It runs without any problem, but now comes the following, I also have a side menu with the list of cities, this one, I assign a setLocation(post) event, similar to the previous one, it runs normally, in the logs it appears that it does the query the api, when I show the data that gets the promise in the js code that I put above, it shows me normally (img 3), however the $scope.forecast is not updated, here is part of the code that is in img2 and displays the result of the query to the api.
<div class="col-xs-12">
<div class="">
<p> FORECAST== {{forecast}}</p>
<h3>
{{forecast.city.name | placeholder:'?'}}, {{forecast.city.country | isoCountry}}
<small>Lon: {{forecast.city.coord.lon | number:2}} Lat: {{forecast.city.coord.lat | number:2}} Population: {{forecast.city.population | number:0}}</small>
</h3>
</div>
</div>
</div>
// Lateral menu options cities
<ul class="dropbox_citys">
<li ng-repeat="post in exampleLocations | orderBy:'name':true" >
<a ng-click="setLocation(post)">{{post}}</a>
</li>
</ul>
Here I leave some images, the first of what I want to do in the side menu are the lists of cities, click and update the model, $scope.forecast, in the logs using the side menu or from the same interface where there are all the cities that you see on the screen, the result is the same, the headers are the same, but using the side menu the update of the model is not executed, $scope.forecast, it is not updated in the html, even printing the data that comes out when they make the queries which do exist.
//Clicking on the side menu It is not updated //Clicking on the buttons of the index.html#forecast If it is updated **//Logs is the same for img 1 and img2 **
I know it's something simple, however I haven't found the problem for a long time, maybe I'm forgetting something. What could be happening?
---Update index.html---
<!DOCTYPE html>
<html lang="en" ng-app="openWeatherApp">
........
.......
<body ng-controller="OpenWeatherCtrl">
.............
<div id="page-content-wrapper" class="col-xs-12">
<div class="container-fluid">
<div class="col-xs-12 sect-2">
<div class="col-xs-12 sect-2">
<div class="col-xs-12 divs_ini_container">
<h2>Climas</h2>
<div class="col-xs-12 div_ini_01 sect-2" >
<center>
<div ng-view></div>
</center>
<p>
..................
..................
---Update 2---
console log de $scope.location
Repositorio:https://github.com/kevinlllR/arquisoft
Investigating your code I realized that the scope you have in the side menu against the rest are different:
The side menu has
id: 3
, while in your menu where you search, and the buttons above you have theid: 4
.Reviewing the code, I took the liberty of putting the variable you mention:
I have printed the forecast , to see what it had:
Indeed yes, it changes when I give it search in your menu, but it changes in the one on the side of the menu.
So I have come to the conclusion that by having a
ng-view
, with the application from outside, the$scope
.The solution that occurs to me at the moment is to make the "forecast" global, something like
$rootScope
.