I'm trying to do the following, a query to 2 apis.
The first query is to bring the data of a given city, I use it with promises.
The second query is, to bring from that data 7 more data given longitude, latitude and date, I made it using an IIFE, so try to do it with $ resource but for more than try it could not solve problems with the parsing from json.
Here is the code that makes the query to the api to bring the data and update the forecast model, there are 2, one for when the location changes and the other that directly invokes the function that brings 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 well 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, I assign a setLocation event (post), similar to the previous, it runs normally, the logs appear which makes the query to the api, when I show the data that gets the promise in the js code that I put up, it shows me normally (img 3), however the $ scope.forecast is not updated, here part of the code that is in img2 and shows 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>
// Side 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 all the cities are what they see on the screen, the result is the same, the headers are the same, but using the lateral menu the model update 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 Does not update
// Clicking on the buttons of the index.html # forecast If updated
** // Logs is the same for img 1 and img2 **
I know it's something simple, however I have not had a problem for a while, 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
