Parse ThingSpeak Last Entry Feed with jQuery

Using the Last Channel Entry API

Here is a quick reminder on how to access a Channel’s last entry via the ThingSpeak API. For more information visit the ThingSpeak API: Last Feed Documentation.

Last Channel Entry URL (using JSON):

[cce]http://api.thingspeak.com/channels/(channel_id)/feed/last.json[/cce]

Response:

[cce]{“created_at”:””,”entry_id”:(entry_id)”field1″:””,”field2″:””,”field3″:””,”field4″:””,”field5″:””,”field6″:””,”field7″:””,”field8″:””}[/cce]

Parsing JSON with jQuery

We will be starting with a simple webpage with the standard parts, the head and body.

Add the jQuery library to head

[cce][/cce]

Use Callback for remote scripting

The ThingSpeak API supports “Callback” so you can use the ThingSpeak API from a script running on a different domain. All you have to do to use it is add the callback parameter to the API call URL.
[cce]http://api.thingspeak.com/channels/(channel_id)/feed/last.json?callback=?[/cce]

Making web-service calls with jQuery

jQuery makes it so easy to make web-service and API calls (trust us, before there was jQuery we wrote our own libraries to do it for all of the browsers in 2003).
[cce]$.getJSON(‘http://api.thingspeak.com/channels/(channel_id)/feed/last.json?callback=?’, function(data) { // Insert JavaScript code to operate on return data });[/cce]

Parsing JSON with jQuery

To access the data that jQuery gets for you, all you have to is specify the data.(key) of the parameter that you are looking for.
For example, to parse out what data “field1” is set to, specify “data.field1”.

Example

View the source code of this webpage to see a complete example of how to parse a ThingSpeak Channel’s Last Entry Feed using jQuery.
Source Code: Parse_ThingSpeak_Last_Entry_with_jQuery.html

Project

Rob Myers created a ThingSpeak project using Python and a webcam. Rob wrote a script that takes a webcam photo of his studio and extracts colors from the image. Every 10 minutes, the script pushes the color selection to his public ThingSpeak channel. The result gives you a “mood” of Rob’s studio. Using jQuery, the channel is parsed and updates a webpage dynamically with the latest colours.
Here are the live colours:
[iframe_loader height=”600px” src=”http://community.thingspeak.com/jquery/Parse_ThingSpeak_Last_Entry_with_jQuery.html”]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.