jsonp 3.0.1

  • README.md
  • Example
  • Installing
  • Versions
  • 58


JSONP handler for Dartlang. Allows you to make individual and multiple requests, as well as providing some support for automatically converting the responses to Dart classes.


This library handles requesting a URL and handling the subsequent callback. To achieve this a URL must be provided which can be updated with a callback method name which is determined by the library. There are two ways to do this.

The easiest way is to provide a complete URL which includes a callback query parameter. The query parameter value which can be replaced by the callback name has the placeholder value ?. The library is not smart about this, and will replace all query parameters which have that value.

jsonp.fetch( uri: "http://example.com/rest/object/1?callback=?" );

If you need more control over the creation of the URL, then you can take the more advanced approach. This means providing a function which takes a String (the callback method name) and returns a string (the request URL including the callback parameter). As you define the function, this approach allows total control over the constructed URL.

jsonp.fetch( uriGenerator: (String callback) =>
    "http://example.com/rest/object/1?callback=$callback" );

Single Requests

The fetch method can be used to make a single request.

When you use fetch to request a URL a future will be returned. This future will complete with the response from the JSONP request.

import "dart:async";
import "package:jsonp/jsonp.dart" as jsonp;

// In this example the returned json data would be:
// { "data": "some text" }
Future<dynamic> result = jsonp.fetch(
    uri: "http://example.com/rest/object/1?callback=?"

result.then((var proxy) {

Type Conversion

The proxy objects can be time consuming to handle, as you don't get things like autocompletion for proxy fields. It's best to wrap the data in an object and then return that from your method:

class ExampleData {
  var data;

  fromProxy(var proxy) {
    this.data = proxy['data'];

    uri: "http://example.com/rest/object/1?callback=?"
  .then((var proxy) => new ExampleData.fromProxy(proxy))
  .then((ExampleData object) => print(object.data));

Many Requests

The fetchMany and disposeMany methods can be used to handle many requests.

The fetchMany method will return a named Stream which receives individual results. This Stream is identified by the name parameter in the request, sharing single Streams across multiple requests. This means you only need to set up result handling code once, as all results will be handled by the same Stream.

By default the Stream provides the response from the JSONP request.

Stream<dynamic> object_stream = jsonp.fetchMany(
    "object", uri: "http://example.com/rest/object/1?callback=?"

// The uri is optional when making a fetchMany request
// as you may just want to configure the Stream
Stream<dynamic> user_stream = jsonp.fetchMany("user");

    (var data) => print("Received object!")
    (var data) => print("Received user!")

// You just need to refer to the stream by name to make further requests
    "object", uri: "http://example.com/rest/object/2?callback=?"
    "object", uri: "http://example.com/rest/object/3?callback=?"
    "object", uri: "http://example.com/rest/object/4?callback=?"
    "user", uri: "http://example.com/rest/user/1?callback=?"

// Release the stream if you don't need it any more

Type Conversion

Converting the type of your stream is also straight forward. You can convert the values on demand by mapping the stream, which returns a typed stream:

Stream<ExampleData> example_stream = jsonp.fetchMany(
  .map((var proxy) => new ExampleData.fromProxy(proxy));

    (ExampleData object) => print("Received ${object.data}")

// No need for the type when you don't use the returned stream
    "object", uri: "http://example.com/rest/object/1?callback=?"
    "object", uri: "http://example.com/rest/object/2?callback=?"
    "object", uri: "http://example.com/rest/object/3?callback=?"


An example of using the library can be found in the examples folder. This example makes some calls to working and broken jsonp endpoints. The results are printed in the console.

General Note

This library is not required because you can make JSONP requests very easily with pure Dart. This library does reduce the work required to make JSONP requests.

Using javascript has become significantly easier since this was originally written. To perform a JSONP request without using this library is as easy as:

import 'dart:html';
import 'dart:js';

context['callbackMethod'] = (JsObject response) {
  // Do something with the response object. The JsObject can be treated like a dictionary.

    new ScriptElement()
      ..src = 'http://some.service/?callback=callbackMethod'

To get a Future for this do the following:

import 'dart:async';
import 'dart:html';
import 'dart:js';

Completer callbackCompleter = new Completer();

context['callbackMethod'] = (response) {

  // if you just want to use this once, then you can clear the callback method:
  context['callbackMethod'] = null;

    new ScriptElement()
      ..src = 'http://some.service/?callback=callbackMethod'
callbackCompleter.future.then((JsObject response) {
  // Do something with the response object. The JsObject can be treated like a dictionary.

You can read more about Dart Javascript interoperability here.


import 'package:jsonp/jsonp.dart';

var brokenUrl =
var workingUrl =
var streamCallback = 'jsonp_stream_callback';

main() {
  fetchMany(streamCallback).listen(prefixCallback('Stream received: '),
      onError: prefixCallback('Stream error: '));

  fetch(uri: brokenUrl).then(prefixCallback('Future received: '),
      onError: prefixCallback('Future error: '));

  fetch(uri: workingUrl).then(prefixCallback('Future received: '),
      onError: prefixCallback('Future error: '));

  fetchMany(streamCallback, uri: brokenUrl);
  fetchMany(streamCallback, uri: workingUrl);

dynamic prefixCallback(var preamble) {
  return (value) {

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  jsonp: ^3.0.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:jsonp/jsonp.dart';
Version Uploaded Documentation Archive
3.0.1 Oct 9, 2018 Go to the documentation of jsonp 3.0.1 Download jsonp 3.0.1 archive
3.0.0 Oct 7, 2018 Go to the documentation of jsonp 3.0.0 Download jsonp 3.0.0 archive
2.1.0 Jun 13, 2017 Go to the documentation of jsonp 2.1.0 Download jsonp 2.1.0 archive
2.0.1 Feb 11, 2016 Go to the documentation of jsonp 2.0.1 Download jsonp 2.0.1 archive
1.0.6 Feb 2, 2016 Go to the documentation of jsonp 1.0.6 Download jsonp 1.0.6 archive
1.0.4 Aug 21, 2014 Go to the documentation of jsonp 1.0.4 Download jsonp 1.0.4 archive
0.0.6 Nov 2, 2013 Go to the documentation of jsonp 0.0.6 Download jsonp 0.0.6 archive
0.0.5 Sep 8, 2013 Go to the documentation of jsonp 0.0.5 Download jsonp 0.0.5 archive
0.0.4 Sep 5, 2013 Go to the documentation of jsonp 0.0.4 Download jsonp 0.0.4 archive
0.0.3 Sep 5, 2013 Go to the documentation of jsonp 0.0.3 Download jsonp 0.0.3 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.10


Detected platforms: web

Primary library: package:jsonp/jsonp.dart with components: html, js.

Maintenance issues and suggestions

Maintain CHANGELOG.md. (-20 points)

Changelog entries help clients to follow the progress in your code.

The description is too short. (-20 points)

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0