APIs with Express
In order to get around issues such as CORS and API access control, we can communicate with other servers through our server. In this case, our server acts as both a client and a server. We'll be doing some requests using the request Node module.
To use the module, install it using npm.
npm install --save request
Here's an example from NPM's homepage for the request module. Let's take a look at it.
const request = require('request');
request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body) // Show the HTML for the Google homepage.
}
});
Identify what's necessary for making a server-side request.
- module import
- request function
- URL
- any other data or headers that need to be passed (optional)
- callback function (the code that runs once the request finishes)
- checking for errors
- checking the response code
- handling the body of the response
You can make a .js file that only has this code, and try running it with Node. See what happens.
Incorporating request into Express
In order to incorporate the request module into Express, we can set up a basic Express application and place the request code inside a route.
This can be done by creating a new directory, running npm init, then installing the correct dependencies (refer back to the notes if you forgot). Here's an example app.
Example
index.js
const express = require('express');
const request = require('request');
const app = express();
app.get('/', function(req, res) {
request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
res.send(body);
}
});
});
app.listen(3000);
Note that this app sends out the HTML for http://www.google.com, minus the images due to the images having links relative to http://localhost:3000
Let's use a more useful source of data that we can parse, like OMDB (Open Movie Database)
Fetching JSON data
Let's modify the example above to make a request to OMDB's API. OMDB Link
We'll be using this endpoint: http://www.omdbapi.com/?s=star+wars
Modified Example
index.js
const express = require('express');
const request = require('request');
const app = express();
app.get('/', function(req, res) {
let qs = {
s: 'star wars'
};
request({
url: 'http://www.omdbapi.com',
qs: qs
}, function (error, response, body) {
if (!error && response.statusCode == 200) {
let dataObj = JSON.parse(body);
res.send(dataObj.Search);
}
});
});
app.listen(3000);
Things to Note
- In order to pass a query string to OMDB, we can create an object with key-value pairs.
- We also need to modify our request so it takes an object with the
urlandqs.
- We also need to modify our request so it takes an object with the
- After getting the response back, we need to parse the body using
JSON.parse. Otherwise, we'll be treating the body as a string instead of an object. - It's very important to call
res.sendin the correct place (the request callback)- Try putting
res.sendoutside of therequestfunction two lines down. You'll get an error!
- Try putting
Creating UI From JSON
Requests allows us to get data, but it's not displayed very pretty. Let's build a template to display the data.
Create a file views/results.ejs to display all of the results:
<!DOCTYPE>
<html>
<head>
<title>Star Wars</title>
</head>
<body>
<h1>Star Wars</h1>
<% results.forEach(function(result) { %>
<% include ../partials/result %>
<% }); %>
</body>
</html>
Create a file partials/result.ejs to define how each result should be displayed.
Creating a directory called partials is a good way to organize sites. Create files
that represent entire pages under views and place templates for small components of
the site in the partials directory.
<h2>
(<%= result.Year %>) <%= result.Title %>
</h2>
<img src="<%= result.Poster %>">
Render the page with the parsed results passed as a paramter:
let dataObj = JSON.parse(body);
res.render("results", {results: dataObj.Search});