Converting JSON Data into an API through Serverless.

Unsplash.com photo by Markus Spiske

Quick summary: In this tutorial, we’ll be using Webtask.io to show how you can build your own API in front of any JSON dump from a URL that returns JSON data. A fair notice, we can achieve this with any serverless provider.

According to the definition by cloudflare, Serverless computing is a method of providing backend services on an as-used basis. A serverless provider allows users to write and deploy code without the hassle of worrying about the underlying infrastructure.

One among the capacities of what can be done with serverless is to build API wrappers. Available APIs out there are up to thousands even ones yet discovered, but most of the times all we want to do is manipulate or change the data to make it more appropriate for our use through transformation, manipulation, reduction, combination or anything else. While that can be done on the client side, it can be much more efficient and faster to do so on the server. And to think about it, who wants to setup a server just to change an API when you can easily use a serverless function instead?

  1. Basic knowledge of NodeJS
  2. JavaScript(ECMAScript 2017)
  3. Basic knowledge of APIs

For this project we will use a common known data, we’ll be using a JSON packet of Pokemon data — https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json. The available data in the JSON counts to 151 different Pokemon characters. And for our first code, we’ll write a function to simply return the data and also declare a cache. As a reminder, serverless is stateless but most available serverless providers may keep your function active for a short duration of time. So repeated calls within a certain timeframe can make use of locally cached values for quicker results. Better!

let rp = require('request-promise');const JSON_URL = 'https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json';let cached;

module.exports = async (context, callback) => {

let data = await fetchData();

callback(null, { data });
};

async function fetchData() {
if(cached) {
console.log('currently using cache');
return cached;
}
else {
return new Promise((resolve, reject) => {
rp(JSON_URL)
.then(res => {
cached = JSON.parse(res).pokemon;
resolve(cached);
});

});
}
}

Here we simply returned a cache or reached for a URL and returned that. The code structure gave us some immediate benefits. If the server hosting the data is slow, our cache can help with that. If for any reason the URL ever goes away, or if they decide to charge for the data provided, we can potentially switch to another provider without users ever noticing.

To make things more clean from the data, we can add filtering. We filter for the fields that we’ll make use of within the project.

let rp = require('request-promise');const JSON_URL = 'https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json';let cached;module.exports = async (context, callback) => {

let data = await fetchData();

// filter by name
if(context.query.name) {
console.log(`filter to name ${context.query.name}`);
let sname = context.query.name.toLowerCase();
data = data.filter(p => {
let lastname = p.name.toLowerCase();
return lastname.indexOf(sname) >= 0;
});
}

// filter by type
if(context.query.type) {
let type = context.query.type.toLowerCase();
console.log(`filtering to type ${type}`);
data = data.filter(p => {
//write types to lowercase
let types = p.type.join(',').toLowerCase().split(',');
return types.indexOf(type) >= 0;
});
}

callback(null, { data });
};

async function fetchData() {
if(cached) {
console.log('currently using cache');
return cached;
}
else {
return new Promise((resolve, reject) => {
rp(JSON_URL)
.then(res => {
cached = JSON.parse(res).pokemon;
resolve(cached);
});

});
}
}

Now we have added some filters, name and type, using the query string and through the Context object that all Webtasks have access to. For each filter process, we just added a simple array based filtering and changed the data to lowercase so we don’t have to worry about matching the same case. We can make as so many available filter we want. These will consist the fields that you will make available on your API.

We have learnt how to setup our data returned from a JSON URL and filter through it leveraging serverless. This tutorial is not about building an API, but with the data we have currently, we can make our own APIs ready for consumption.

  1. Webtask.io
  2. Serverless concepts
  3. Pokemon JSON data

Software Engineer | Technical Writer | I love bunnies