Displaying API Data in a View in Node/Express

Lately I’ve been teaching myself Node and Express. I’ve been enjoying how it lets you tinker with things on a more granular level than Rails does; it’s more like Sinatra in that way.

As part of a project I’m working on, I needed to figure out how to display content from another website’s API in a view page on my project. It took a bit of stumbling around online to figure out exactly how to do this, so I thought I’d show how I got it to work.

Typically, in the main application file of an Express project (that file is often called app.js but it could be whatever-you-want.js), this is how you set up a route to a particular view:

app.get('/', function(req, res){
  res.render('index');
});

This will route GET requests for the default path — for example, localhost:3000/ or mywebsite.com/ — to the index view file. This means Express will be looking for a view file in your project named “index” followed by the appropriate file extension for the templating system you’re using: index.jade, index.handlebars, index.hbs, etc. Your index view page might just look like this:

<h1>Welcome to the Index Page</h1>

For my project, on the index page I wanted to display data from the TouringPlans.com API. The API has a list of all rides at Walt Disney World’s Magic Kingdom, and I wanted to display that list. (I’m a Disney theme park geek.) To do something like this, you can install the request package via npm:

npm install request

Then put the following near the top of the app.js file:

var request = require('request');

The previous app.get call expands to the following:

app.get('/', function(req, res){
  var url = 'https://touringplans.com/magic-kingdom/attractions.json';
  request(url, function(error, response, APIdata) {
    if (!error && response.statusCode == 200) {
      var data = JSON.parse(APIdata);
      res.render('index', {rides: data});
    };
  });
});

To explain this: the “request” function (third line) takes a URL (in this case, the URL of the API) and a callback function with three arguments. The third of those arguments represents the data contained in the API, which I’ve called “APIdata.” Assuming there is no error (“!error”) and we get an A-OK 200 status code (fourth line), we set a variable (here called “data”) to the parsed API JSON data (fifth line).

What about the sixth line — what is “{rides: data}”?

Well, the data in the API starts off like this:

[
  - {
        name: "Astro Orbiter",
        short_name: "Astro Orbiter",
        permalink: "astro-orbiter"
},
  - {
        name: "Big Thunder Mountain Railroad",
        short_name: "Big Thunder Mtn",
        permalink: "big-thunder-mountain-railroad"
},
[etc.]

I want to somehow pass the name of each ride to the view. This is done by creating a template in the index view page that will iterate through the data (in my case, using handlebars templating):

<ul>
{{#each rides}}
  <li>{{this.name}}</li>
{{/each}}
</ul>

This creates a template called “rides” and iterates through each element (“this”) it contains, displaying the value of the “name” key in each element, which is the ride’s name.

But how does the view know that “rides” should represent the API data? That happens here:

res.render('index', {rides: data});

This tells Express to render the “index” view, and if it sees a template in that view called “rides”, replace it with “data,” which we’ve already set to “JSON.parse(APIdata)”, i.e. the parsed JSON data.

And, we’re done. The list of rides now appears on the web page:

Screen Shot 2016-03-31 at 4.21.55 PM

Data displayed!

Leave a Reply

Your email address will not be published. Required fields are marked *