javascript - JSONP angular js displaying multiple objects -
javascript - JSONP angular js displaying multiple objects -
similar question posted i'm having issue grabbing weather week , allocating different rows. format want is:
mon tues wed thurs
sydney 25 21 21 22
melbourne 26 18 21 24
etc unfortunatly grabbing first part of array , coppying areas.
here js :
app.controller('forecastctrl',function($scope, $http){ $scope.weatherdatasydney = null; $scope.weatherdatabrisbane = null; $scope.weatherdataperth = null; $scope.weatherdatamelbourne = null; $scope.weatherdataadelaide = null; $scope.weatherdatadarwin = null; $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/sydney.json?callback=json_callback').success(function(data){ $scope.weatherdatasydney=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/brisbane.json?callback=json_callback').success(function(data){ $scope.weatherdatabrisbane=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/melbourne.json?callback=json_callback').success(function(data){ $scope.weatherdatamelbourne=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/perth.json?callback=json_callback').success(function(data){ $scope.weatherdataperth=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/darwin.json?callback=json_callback').success(function(data){ $scope.weatherdatadarwin=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/cairns.json?callback=json_callback').success(function(data){ $scope.weatherdatacairns=data; }); $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/australia/adelaide.json?callback=json_callback').success(function(data){ $scope.weatherdataadelaide=data; $scope.cityforecasts=[ { name:'sydney', high: $scope.weatherdatasydney.forecast.simpleforecast.forecastday }, { name:'brisbane', high: $scope.weatherdatabrisbane.forecast.simpleforecast.forecastday }, { name:'melbourne', high: $scope.weatherdatamelbourne.forecast.simpleforecast.forecastday }, { name:'adelaide', high: $scope.weatherdataadelaide.forecast.simpleforecast.forecastday }, { name:'darwin', high: $scope.weatherdatadarwin.forecast.simpleforecast.forecastday }, { name:'perth', high: $scope.weatherdataperth.forecast.simpleforecast.forecastday }, { name:'cairns', high: $scope.weatherdatacairns.forecast.simpleforecast.forecastday }, ] }); $scope.getforecast = function() { for( i=1; < 2; i++){ for(x=0;x<1;x++){ return($scope.cityforecasts[i].high[x].high.celsius); } } } });
here html
<div id="forecast-container"> <div class="forecast" ng-repeat="cityforecast in cityforecasts"> <div class="city-forecast"> <span>{{cityforecast.name}}</span> </div> <div class="list-days"> <ul class="day"> <li id="day1">mon</li> <li id="day2">tues</li> <li id="day3">wed</li> <li id="day4">thur</li> </ul> </div> <div class="temp-list"> <ul > <li class="temp" ng-repeat="forecast in weatherdatasydney.forecast.simpleforecast.forecastday"> {{getforecast()}} </li> </ul> </div> </div>
the issues see are:
where calling {{ getforcast() }} in code how getforcast set up. ng-repeat in htmlyou can solve problem straight in html (i'm assuming object structure).
final html:
<div id="forecast-container"> <div class="forecast" ng-repeat="cityforecast in cityforecasts"> <div class="city-forecast"> <span>{{cityforecast.name}}</span> </div> <div class="list-days"> <ul class="day"> <li id="day1">mon</li> <li id="day2">tues</li> <li id="day3">wed</li> <li id="day4">thur</li> </ul> </div> <div class="temp-list"> <ul > <li class="temp" ng-repeat="forecast in cityforecast.high"> {{ forecast.celsius }} </li> </ul> </div> </div> </div>
since have cityforecast in ng-repeat, need loop cityforecast.high (assuming cityforecast.high array).
previously had html:
<ul > <li class="temp" ng-repeat="forecast in weatherdatasydney.forecast.simpleforecast.forecastday"> {{getforecast()}} </li> </ul>
you looping forecast weatherdatasydney (which still wasn't exact issue seeing), if @ getforecast()
$scope.getforecast = function() { //only running 1 time for( i=1; < 2; i++){ //only running 1 time for(x=0;x<1;x++){ //this returning same statement (below) every single time getforecast called //return($scope.cityforecasts[1].high[0].high.celsius); //which equal brisbane's temp (per code posted) return($scope.cityforecasts[i].high[x].high.celsius); } } }
i hope can help solve issue.
javascript jquery angularjs
Comments
Post a Comment