AngularJS Http Jsonp ($http.jsonp) Service Method Example

Here we will learn what is $http.jsonp request in angularjs, use of $http.jsonp service and how to use $http.jsonp service method in angularjs applications with example.

AngularJS Http Jsonp ($http.jsonp) Service

In angularjs jsonp or json with padding service is used to make cross domain requests from client browser. By using $http.jsonp service in angularjs we can get data in json format and the server whatever we are requesting should support jsonp requests otherwise it’s worthless and Its short cut method of $http services in angularjs.

 

Generally now a days browsers are blocking access data from a server which is in different domain due to same origin policy. By using angularjs $http.jsonp method we can access data from different domain without having any access problems.

Syntax of AngularJS $http.jsonp() Service

Following is the syntax of using $http.jsonp service in angularjs

 

var app = angular.module('jsonserviceApp', []);

app.controller('jsonCtrl', function ($scope, $http) {

//Call the service to get data in json

var url = "Some API Url" + "?callback=JSON_CALLBACK";

$http.jsonp(url)

.success(function (data, status, headers, config) {

$scope.details = data;

})

.error(function (data, status, headers, config) {

$scope.statusval = status;

});

If you observe above syntax we appended “callback=JSON_CALLBACK” to url to make a service request. AngularJs is having its own callback pattern, so it will follow that pattern to handle jsonp callbacks.

 

In angularjs always we need to send callback=JSON_CALLBACK with url while requesting jsonp service. Using this pattern we handle the JSONP call-back and its call-back is called JSON_CALLBACK.

 

Note: In above syntax we passed $http as argument to the controller in angularjs. To use service in controller we need to pass $http as parameter.

 

We will see how to use $http.jsonp service in angularjs with example.

AngularJS $http.jsonp() Service Example

Following is the example of using angularjs $http.jsonp service in application.

 

Live Preview

<!Doctype html>

<html>

<head>

<title>Processing $http.jsonp() response in service</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('myServiceApp', []);

app.controller('myServiceCtrl', function ($scope, $http) {

$scope.doJSONPRequest = function () {

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)

.success(function (data, status, headers, config) {

$scope.details = data.found;

$scope.statcode = status;

})

.error(function (data, status, headers, config) {

$scope.statcode = status;

});

}

});

</script>

</head>

<body ng-app="myServiceApp">

<div ng-controller="myServiceCtrl">

<h3>Processing $http.jsonp() response in service</h3>

<button ng-click="doJSONPRequest()">Click and make JSONP request</button>

<p>Data Details: {{details}}</p>

<p>Status Code: {{statcode}}</p>

</div>

</body>

</html>

Now we will run and see the output of above angularjs $http.jsonp service method that would be like as shown following image.

Output of AngularJS $http.jsonp Service Example

Following is the result of using $http.jsonp service in angularjs application.

 

Angularjs $http jsonp service example with output or result