How to connect Meteor.js to an external API

During the day I work for a great company, HelpSocial.com, and one of our biggest draws is our API.

The API is a great source of social data and meta-data related to the users posting.

Simple use case…

You run a company and have a Twitter account. A customer tweets you and says, “I broke my widget! WAAAH!”.

You tweet back and replace the widget.

Then a week later the same user messages you again saying they broke another widget.

Using the HelpSocial API you can not only know WHEN those tweets come in, but you also get context like what you’ve done with this customer in the past.

Social customer service agents instantly know what they need to know without having to do any back and forth with other employees.

Everything is right in their face.

Anyway, I say all this because as a developer I’m always experimenting with cool new things. And lately I’ve gotten hooked on Meteor.

So, I decided to figure out how to connect to external APIs thinking it would be a cool exercise to connect to our API for some kind of Meteor app.

I ended up coming across one very helpful article from Dave Burles.

And this is my implementation of it.

In this project, I wanted to create a very simple tool that connected to Reddit and read the front page of a subreddit (basically a forum on a specific topic).

Firstly, I break up my Meteor projects into what are essentially ‘packages’ on the client and server end.

You can see my directory structure here.

In ./client/templates you’ll see /Posts.

This holds both the template and JS surrounding a ‘post’ item.

Each post on Reddit ends up being a ‘post’ in this app.

In ./server/packages/ you’ll see /RedditReader/RedditReader.js

This is a script that connects to Reddit, loads a JSON response, and shoves it into a collection to be read and displayed in the DOM.

Let’s take a look at these components.

Connecting To An External Data Source

You likely know how to connect to a Mongo collection already. This is pretty similar.

You’ll still be using the subscribe/publish system. You just won’t be using Mongo as your data source.

This is pretty simple. First we’re publishing something called a ‘subredditSearch’ that we can subscribe to on the front end.

Once we’ve published, we’re using the HTTP module to grab data from Reddit.

We’re not using any kind of auth, so we don’t need to use any OAuth libraries or require username/passwords to be inserted. One day I’ll update this project to include actual Reddit integration, but that’s not today.

Next, we’re iterating over each item we get back in JSON using the Underscore library.

If you haven’t used Underscore before, check it out. It’s a fantastic utility library.

Anyway, here’s that code.

Simply, what we’re doing is stripping out the data we actually want and adding each item to a collection we create elsewhere called ‘posts’.

There’s some other logic in here, but it’s specific to this use case, so it’s not important. Just know that you need to add your object to your collection that you’re creating in just a bit.

You can also ignore my Meteor.methods at the end of the first gist earlier. That is also specific to this case.

Displaying Your Data

Take a look at this mess.

Ok, it’s not actually that messy.

Anyway, let’s dive in.

The first thing we need to do is set some variables.

We create a global variable called Posts that we can access later on and set some default variables.

‘subreddit’ is set to ‘all’ for /r/all and ‘searching’ is set to false, since we’re not loading anything the second the app loads (Well, we are, but it hasn’t happened yet as far as the code goes)

Now we’re adding in our tracker. We’re subscribing to our model that we published earlier and getting the initial bit of data from Reddit.

After this comes our events. Most of this isn’t important to you. You’ll have your own DOM events.

But there is one awesome thing I want to mention.

Blaze.getData is very, very cool.

Blaze, Meteor’s templating engine, keeps a record of every DOM element it creates and the data associated with it.

So if we plug in a DOM element, we can get the model data that is used to create it. How cool and amazingly useful is that!

You can see how I’m using it to get the data from a click event above.

The rest is pretty standard Meteor.

You’ve got your templates, you’ve got your handlers, and you’ve got your utility methods.

In short, that is how you connect to an API and extract it’s data into a Meteor collection for use in a reactive template.

And lastly, if you need someone with years of experience in the ever-changing world of Javscript to lend a hand or simply some advice, send an email to cwramsey (at-sign) gmail (dot) com and we can talk. I’m currently only open for small gigs, so I book up quickly.