How to pull data from JSON API’s with JQuery and AJAX (when you’re a totes noob)

This article is meant as a guide for beginner web developers that want to wrap their brains around their first API driven JSON consumption. I know what you’re thinking: “what?”. What I am talking about is when you want to get data from an active website/web service to feed your own brilliant web solution.

What’s included in this article
* A very basic walkthrough of how to use an API to take data from one website’s backend database and deliver it into your very own (and very basic) web page to do nerdy web stuff with.
* Accomplishing this by *borrowing* JSON (Javascript Object Notation)from Reddit using JavaScript, AJAX (Asynchronous Javascript and XML), basic HTML and some very embarrassing design work with CSS.

What’s not included
*
a full and useful solution
* a good looking website
* miracles
* A guarantee that content of Reddit you see while doing this won’t be vulgar… it is Reddit’s latest posts feed. o.0

Let’s start with some psuedocode:

// serve up some cold hard truth
function doSomeTruth( TheTruthAboutAPIs ) {

If.. (you’re asking how to use an API && you haven’t done this yet)
{
console.log(“You’re going to have a bad time! But.. this article will help.”);
TheTruthAboutAPIs = TrueThat;
}
else..
{
console.log(“here’s a link to google map api, you have fun with that.. https://enterprise.google.com/maps/products/mapsapi.html.”);
}

Enough with my junior developer antics, let’s get on to the steps:

PART 1) Research the API documentation

No two api’s are ever alike. Why? Because life is hard and complicated, just like any data that will ever have any real world use to you. For this reason researching the UNIQUE solution that the web developers of your target data source have provided in their API is absolutely vital.

Here are a few steps to follow to help you learn what you are going to need to focus on to help make your mission successful.

So what are you looking for? I will sum this up into four parts.
A) Where?
B) Key?
C) Query Strings?
D) What URL gets the JSON?

A) WHERE Is the API? (more importantly: where is it’s documentation and do I need an account)? The clear answer here is to google search the resource’s name, followed by “api”. In our example I’ll be easy on us and use Reddit as an example. Shortcut to documentation here: https://www.reddit.com/dev/api/

B) KEY? Do I need an api key to access the data? Not all data is freely given and for good reason. Before asking how can I access API data, you have to ask how can I be given permission to it? Many sites holding ideal information such as Twitter or Facebook’s api’s are going to want to know who you are before they freely give you their data. Once you sign up for a developer account with these services, they provide you a key. A key often looks like encrypted jibberish and it fits into the URL most of the time, such as:

http://api.IAmNotARealSiteAsFarAsJesseKnows.com/json-for-you/?API_KEY=1239571325012351035135091735

Fortunately for us, Reddit doesn’t care and freely offers JSON data of its Reddit feeds, so we won’t be needing a key today.

C) QUERY Strings? (This is kind of, sort of, super important)
What query strings does the api require to return a JSON result?
What is a parameter? fair enough.. Let’s check out a url from an open weather app example:

api.openweathermap.org/data/2.5/weather?q=London

I could go on for days about urls, let’s just talk about two parts here:
1) all of this stuff: api.openweathermap.org/data/2.5/weather.
2) the query string: they appear after the ‘?’ mark, in this case: ?q=London.

“q=London”, according to the Open Weather Map API Documentation, is the query parameter their data service looks for to know what information about what city to return to you. Depending on what you’re trying to do, these query strings will become essential for combing the service and getting back the information you need. Each api is going to set their data up differently so again, read their documentation.

D) YOUR JSON URL
In our case, Reddit’s API, so we don’t need many parameters to get the latest data, we just need to know where to get it — according to their documentation, we can do so by simply using this url:

https://www.reddit.com/new/.json

Part 2) BUILDING: Let’s actually build something now, yeah?

Remember when I told you this article won’t help you build something pretty or useful? I wasn’t kidding. This is what you’re building: a web page that horribly redesigns a reddit new posts feed. https://repl.it/MHkm/1

https://repl.it/MHkm/1

How I built this horribly ugly “Shreddit API Parser”

A) I read the API documentation
and assembled the URL for the report I wanted, which is incredibly basic and just gets the newest reddit page posts returned as a JSON file. https://www.reddit.com/new/.json

B) I built a basic html web page to push the API data to. (See this on my repl example link shown above). That html page contains the basic HTML Boilerplate (google it), and most importantly, it includes a reference to a JQuery CDN (aka hosted JQuery library). I’m not going to cover why, but this CDN MUST be in your HTML for this solution to work, you’ll notice I placed mine at the bottom of my HTML:

<script src=”https://code.jquery.com/jquery-3.1.1.min.js" integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script>

I also added one more critical piece to this html page: a div with a class id of main. Why? because we are going to write Javascript that outputs our JSON data into this div.

<div id=”main”></div>

So to follow along, I recommend you make a basic html page/file and add the above two things to it before our next step.

C) I wrote the javascript that makes this work in a js file. This is the heart of this article. (If you are not using repl.it, or jsbin.com to follow along, be sure to make a main.js file and link your html file to it in the <head>.)

Read the comments below to understand each piece of this Javascript solution. Don’t copy/paste the following code on this page though, just use my repl.it link for that: https://repl.it/MHkm/1

Understanding My Javascript File

Let’s use a JQuery function to fire off code when the page is loaded.
```$(document).ready(function(){```

Inside of our page load event, call our AJAX function
getRedditJson();
});

Let’s make a function to get JSON data with AJAX, it gets called by that JQuery page load function above.
function getRedditJson(){

//inside of getRedditJson(), Create a Jquery AJAX object

$.ajax({

method: ‘GET’, //use GET because we are READING data.

url: ‘https://www.reddit.com/r/popular/new/.json',
//tell AJAX what url has the JSON we want

dataType: ‘json’, //tell AJAX that its JSON format we want

success: onSuccess, // If AJAX is successful, fire a function called onSuccess

error: onError // if it isn’t successful, fire a function called onError, so we can stress eat chocolate chip cookies and then try again.

}) // close that AJAX function called by JQuery
} //close the getRedditJson(); function

Do the following onSuccess function if AJAX gets the data successfully and include the data JSON returns as a parameter in the parenthesis, i’m calling it jsonReturn, it is literally ALL of my data per my ajax request.

function onSuccess(jsonReturn){

In our onSuccess function, create a for loop that combs the object returned for each specific record and it’s desired field in the JSON data return.

for (var i=0; i<jsonReturn.data.children.length; i++) {

I want a lot of specific data in this for loop and I will get it by making
variables that are set to different subsets of the JSON object (jsonReturn).

To know what to get, I pulled up the JSON data by using the same url in my AJAX function just like a normal url and I used the browser to preview the data I got back, in order to figure out what to do for my app to retrieve each piece of data.

For this url on reddit, I needed my jsonReturn object(the whole set of data). Looking at the data there is a waterfall effect that my variable (also called ‘data’) here covers. Notice how many nested levels in the image below I need to go to get to the many repeating fields of data for all the records I just returned. It starts at the root or jsonReturn then you see the “-data:” at the top left, under it something called ‘- children’ where all the children records are (hint i want to pass my for loop variable [i] on children so that it gets each individual record as a point of reference. Once we have that children is followed by another piece nested under that also called ‘data’.

So every piece of data I am fetching will need a variable. I need to establish the level of the JSON object that I am parsing this data from, I can do that with another variable, let’s call it “data”.

var data = jsonReturn.data.children[i].data;

Cool, so we are still in our for loop returning each record we want individually. Now let’s get specific with the data we are hunting.

var datalink = ‘http://www.reddit.com/'+data.permalink;
//datalink = get me the post’s link

var dataimg = data.thumbnail; //get the url of the thumbnail

var title = data.title; //get the post’s title

var subreddit = data.subreddit; //get the subreddit group

var author = data.author; //get the author of the post

var hourssince = parseInt( Date.now() — data.created);
//get the creation date

var hoursago = Math.round( hourssince / 1000 / 60 / 60);
// do some incorrect math on the creation date that you’ll fix later,
// because it’s embarrassing in this post. ;)

var subtext = “submitted “+hoursago+” hours ago by “ +author+ “ on <a>” +subreddit+ “</a>”; // build a subtext string to pass to the html

//next, build a string for all of the above variables to concatenate into a massive post string of super attractive html.

var loadthis = “<a style=’cursor:pointer;’ href=’”+datalink+”’><section class=’post-container’><article><img class=’thumb’ src=’”+dataimg+”’></article><article><h3><a href=’”+datalink+”’>”+title+”</a></h3><p>”+subtext+”</p></article></section></a>”;

finally, use JQuery to shoot all of that massive string, into that main div in your html (remember that thing?) …and add a snazzy JQuery fade in animation to it, because you can and you are mad with power!
$(loadthis).hide().appendTo($(‘#main’)).fadeIn(1000);
} // that’s a whole lot of for loop action, let’s close it here.
} // that’s also, so much onSuccess action, let’s close that here.

if JSON data fails, alternatively speaking… leave yourself a cute failure message, then go eat some cookies, you’ve earned them!
function onError(){
$(‘#main’).html(‘i failed.’);
}

D) FINALLY: I horridly styled that new basic html web page with terribly awful CSS that no one should be forced to look at, then I walked away and had some chocolate chip cookies, they were delicious.

Full Stack Software Engineer | Digitizer of Dreams