Consuming JSONP APIs

Problem

You wish to call a JSONP API.

Solution

Use the $resource service and configure it to use JSONP. As an example we will take the Twitter search API here.

The HTML template lets you enter a search term in an input field and will render the search result in a list.

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="searchTerm" placeholder="Search term">
    <button ng-click="search()">Search</button>
    <ul ng-repeat="tweet in searchResult.results">
      <li>{{tweet.text}}</li>
    </ul>
  </div>
</body>

The $resource configuration can be done in a controller requesting the data:

var app = angular.module("MyApp", ["ngResource"]);

function MyCtrl($scope, $resource) {
  var TwitterAPI = $resource("http://search.twitter.com/search.json",
    { callback: "JSON_CALLBACK" },
    { get: { method: "JSONP" }});

  $scope.search = function() {
    $scope.searchResult = TwitterAPI.get({ q: $scope.searchTerm });
  };
}

You can find the complete example on github.

Discussion

The Twitter search API supports a callback attribute for the JSON format as described in their documentation. The $resource definition sets the callback attribute to JSON_CALLBACK, which is a convention from Angular when using JSONP. It is a placeholder that is replaced with the real callback function, generated by Angular. Additionally, we configure the get method to use JSONP. Now, when calling the API we use the q URL parameter to pass the entered searchTerm.