Bringing an External REST Feed into a Meteor Project

Scott ZischerkThis week with Meteor we attempted to bring in an external REST feed into the project. We were looking to bring the CodeMash session feed into the application. In order to do this, we needed to use import a Meteor package. We decided to use the http (https://atmospherejs.com/meteor/http ) package to do this since it was referenced in the Meteor documentation and looked to be the standard way to accomplish the task.

We added the package in with the following command:

meteor add http

The documentation was a little lacking on how to fully implement a GET call to a REST service from the server and return it to the client. We ended accomplishing it by creating a server method to GET the sessions, notice that we are filtering the sessions by SessionType. Documentation for the http call itself can be found here:http://docs.meteor.com/#/full/http

Meteor.methods({getSchedule:function(){
this.unblock();
try{
var result=HTTP.get("https://cmprod-speakers.azurewebsites.net/api/sessionsdata");
return result.data.filter(function(item){
return item.SessionType==="Pre-Compiler"||
item.SessionType==="Regular Session";
});
}catch (e) {|
//Got a network error, time-out or HTTP error in the 400 or 500 range.
return";
}
}});

From here we needed to have the client call the server method. We did this:
Meteor.call("getSchedule", function(err, data) {
Session.set('sessionList', date);
});

Template.scheduleAdmin.helpers ({
"sessionList": function(){
return Session.get('sessionList');
}
});

This was the part we had a bit of trouble on. We tried just calling the server synchronously, but it kept returning “undefined” for the data. We discovered that we needed to use a callback when we called the server function and once we got the response from the server we put the data in session. According to the Meteor docs:

Session provides a global object on the client that you can use to store an arbitrary set of key-value pairs. Use it to store things like the currently selected item in a list.

What’s special about Session is that it’s reactive. If you call Session.get(“currentList”) from inside a template, the template will automatically be re-rendered whenever Session.set(“currentList”, x) is called.

So, by storing the data in session, and setting the template helper sessionList to the session value, the data will show up on the page as soon as the server callback is fired.

To wrap it all up, our Meteor template look like this:
<template name="scheduleAdmin">
<h2>Schedule Admin</h2>
<ul>
{{#each sessionList}}
<li>{{Title}}</li>
{{/each}}
</ul>
</template>

From here, were looking into some ways to either cache this data or speed things up since there is a definite lag when pulling this data.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s