Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

HTTP: Make a JSONP request

“JSON with Padding” (JSONP) is a method to deceive a web browser into carrying out requests with a <script> tag that uses the SRC attribute to make a special API request.

Apps can use the HttpClient to make JSONP requests across domains when a server doesn't support CORS protocol.

Angular JSONP requests return an Observable. Follow the pattern for subscribing to observables and use the RxJS map operator to transform the response before using the async pipe to manage the results.

Enable JSONP by providing the HttpClientJsonpModule in the ApplicationConfig providers array in app.config.ts like this:

app.config.ts (excerpt)
      
      export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HttpClientModule),
    importProvidersFrom(HttpClientJsonpModule),
  ]
};
    

In the following example, the searchHeroesJsonp() method uses a JSONP request to query for heroes whose names contain the search term acquired from the user.

      
      /* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  term = term.trim();

  const heroesUrl = `${this.heroesSearchUrl}?${term}`;
  return this.http.jsonp(heroesUrl, 'callback')
    .pipe(
      map(result => this.jsonpResultToHeroes(result)),
      catchError(this.handleError('searchHeroes', []))
    );
}
    

This request passes the heroesUrl with the search term as the first parameter and the standard callback function name, callback, as the second parameter.

You may have to map the Observable response from the http.jsonp method to the intended data type as this example does with jsonpResultToHeroes.

Request non-JSON data

Not all APIs return JSON data. In this next example, a DownloaderService method reads a text file from the server and logs the file contents, before returning those contents to the caller as an Observable<string>.

app/downloader/downloader.service.ts (getTextFile)
      
      getTextFile(filename: string) {
  // The Observable returned by get() is of type Observable<string>
  // because a text response was specified.
  // There's no need to pass a <string> type parameter to get().
  return this.http.get(filename, {responseType: 'text'})
    .pipe(
      tap( // Log the result or error
      {
        next: (data) => this.log(filename, data),
        error: (error) => this.logError(filename, error)
      }
      )
    );
}
    

HttpClient.get() returns a string rather than the default JSON because of the responseType option.

The RxJS tap operator lets the code inspect both success and error values passing through the observable without disturbing them.

A download() method in the DownloaderComponent initiates the request by subscribing to the service method.

app/downloader/downloader.component.ts (download)
      
      download() {
  this.downloaderService.getTextFile('assets/textfile.txt')
    .subscribe(results => this.contents = results);
}
    

Last reviewed on Thu Aug 17 2023