JSON + APIS + Callbacks

Callback functions

To use data from an API you may need a callback function. (see your textbook on page 111). You can’t always use preload() because the data might change while you sketch is running and you will want your program to respond accordingly.

A callback function is a function passed into another function as an argument so that it is called after the outer function is finished.

loadJSON()
loadJSON(); is one example of a function that can take a callback. It can be used in a few ways:

  • 1 argument: loadJSON('path to your JSON file');
  • 2 arguments: loadJSON('path to your JSON file', another function); The second function here would run after the data is loaded.
  • 3 arguments: loadJSON('path to your JSON file', another function, format); Same as the above but you can specify the data might be in the format jsonp for example. Add this if your loadJSON isnt working with two arguments.

loadImage()
loadImage can also take a callback function, that is a second function will only be called when an image is loaded in. Eg.
loadImage('path to image', gotImage);

gotImage is a custom function that will only run when the image is loaded.

See this example.

setInterval()
setInterval can also take a callback function. If you call setInterval in setup, it will run every time interval for the duration of the program. Eg.
setInterval(coolFunction, 5000);

The callback function coolFunction will run every 5000 milliseconds when setInterval has finished. Here’s an example of using setInterval to get weather data from an API every 5000 milliseconds.

setTimeout(coolFunction, 5000); is a similar function but will only go once after the interval is set.

Data from an API.

There are lots of API’s out there that will return you data in JSON format. Some are well documented and easy to use, others are not. Some you need to authenticate with the API to use it (eg register as a developer and get keys).

Making a request to an online API is like requesting to see a website, except instead of getting html back (eg. a webpage) you will get json data back. To request info from an API, you need to know what request to make and this is different for each API. The requests can also be modified in different ways for each API.

The following request returns data of the location of the International Space Station right now.

http://api.open-notify.org/iss-now.json

Or this one gives the number of people in space right now:

http://api.open-notify.org/astros.json

(Note these will not work in OpenProcessing due to HTTPS /HTTP mismatch. Use a local editor).

Copy these into your browser and you will see the data returned as JSON. You could then load this data into a p5 sketch and work with it (more on this later). If your JSON data is a big mess, download a  JSON formatter browser plugin like this one for Chrome or there are some in the app store for Safari too. This will format JSON data in the browser so it looks nice.

Here is a request to USGS who have many APIs. This gives data of recent earthquakes in the world.

https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&limit=1&orderby=time

the last part of the request (query?format=geojson&limit=1&orderby=time) can be modified to control what data is returned. This part of the site documents how to construct the request. If you change the number after ‘limit=’ you will get data on more earth quakes. Change it to 5 and you’ll get data on 5 earthquakes!

Dealing with real time data is tricky for a few reasons like APIs have rate limits and JS is asynchronous. See the examples:

Or to review, see these Shiffman videos:


Please remember that the Space APIs Shiffman sometimes uses, will only work if you use a local text editor and run a server. They will not work from OpenProcessing as it is HTTPS and they are HTTP.