Simple Angular $http.get and ng-repeat sample

We’ll start with the html code of our httpGet.html page. It should be pretty obvious that this will loop through something called weathers.list (weathers is a JSON object containing a property named ‘list’, which contains a list of weather details. We are going to show the .main.temp property of each of those list items.

<h1>{{pageName}}</h1>
 
 
<ul> 
    <li  ng-repeat="thing in weathers.list">
        {{thing.main.temp}}
    </li>
</ul>

Our controller is that pulls the data from an API using $http.get and loads the return value into a $scope variable named ‘weathers’ is very simple:


//we need to inject the $http service 
myApp.controller('httpGetController',['$scope', '$http', function($scope, $http){
    
     $scope.pageName = 'httpGet';
    
     $http.get('http://api.openweathermap.org/data/2.5/forecast?id=524901')
     .success(function(result){
         $scope.weathers = result; //it returns a json list of weather
         
     })
     .error(function(data,status){
         console.log(data);
     })
     
}]);                              
          

That is all it takes for a basic GET and then loading the json data into a webpage.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s