AngularJS $http.get Example
April 14, 2016
$http.get
AngularJS$http.get() is a shortcut to perform HTML form GET method. The syntax is given below.
get(url, [config]);
Where url is a HTTP URL that needs to be accessed and config is a configuration object and it is optional.
$http.get returns HTTP promise object on which we can call .then along with .catch and .finally. On promise object we can also call .success along with .error and .finally.
promise in AngularJS
AngularJS promise is a HTTP promise that will run asynchronously. It is a concept in which a HTTP request started to execute asynchronously such as fetching a URL that can either be successful or fail. promise object is provided by AngularJS$q service. On the promise object we can call other AngularJS functions. $http.get returns promise object.
$http.get with .then
Calling.then callback on promise object obtained from $http.get returns new promise object and can be used as sequential operation. It takes a single object for response.
promise.then: On successful promise
.then is called. If $http.get fetches a URL successfully then AngularJS .then is executed.
promise.catch: It is called when promise is failed.
promise.finally: This method is called in both scenario whether promise is successful or failed.
Find the sample example.
app.js
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http){
$http.get('sample_json.js')
.then(function (response){
$scope.jsondata = response.data;
console.log("status:" + response.status);
}).catch(function(response) {
console.error('Error occurred:', response.status, response.data);
}).finally(function() {
console.log("Task Finished.");
});
});
data: It contains response body.
status: HTTP status code.
headers: Access headers.
config: Configuration object to generate request.
statusText: HTTP status text.
In
.then() we get response object and using this object we get the properties as response.data, response.status etc. Now find sample JSON data used in our example.
sample_json.js
[
{
"id" : "1",
"name" : "Shankar",
"location" : "Varanasi"
},
{
"id" : "2",
"name" : "Ram",
"location" : "Ayodhya"
},
{
"id" : "3",
"name" : "Krishna",
"location" : "Mathura"
}
]
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="row in jsondata">
{{ row.id + ', ' + row.name + ', ' + row.location}} <br>
</li>
</ul>
</div>
</body>
</html>
$http.get with .success
$http.get returns promise object and on this object we call .success which returns same promise object. We need to pass response properties to get their values. .success callback along with .error has been deprecated.
.success: On successful run of
$http.get, .success callback is called.
.error: If
$http.get is unable to access URL, then .error callback is called.
.finally: In both case it runs whether success or failure.
Find the sample example.
app.js
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http){
$http.get('sample_json.js')
.success(function (data, status){
$scope.jsondata = data;
console.log("status:" + status);
}).error(function(data, status) {
console.error('Error occurred:', data, status);
}).finally(function() {
console.log("Task Finished.");
});
});