Don’t Worry, Be API: Coding a News Summary Web App Using an API

Photo by Jon Tyson on Unsplash

Reading the news can be a scary venture at the best of times, but lately it seems that every time I see the headlines I am immediately hit by a wave of dread. Wouldn’t it be great if there was a news site that filtered all the scary articles and had you coming away feeling content and at peace with the world? Well, it’s the internet, and literally hundreds of such websites exist. But do any of them filter content containing only articles about Nigella Lawson, the human embodiment of hygge and the perfect panacea to all our news neuroses? Again, probably. Nevertheless, that is what I will be building today and I invite you to join me.

What is an API? It stands for application programming interface, and is essentially a way for software intermediaries to interact with each other. APIs allow us to request information from one application which we can implement in our own programs. The Guardian Open Platform website has a nice user interface, where you can select parameters to generate a URL query string that we can use for our HTTP request — get creative! In my case, I am filtering content by “Nigella Lawson”, ordering by “newest”, and showing the fields of “thumbnail”. Fingers crossed that with this combination, no depressing articles will slip through the cracks. Even my initial idea of a Britney Spears-filtered news website turned out to be far too upsetting, what with her ongoing legal struggles concerning her conservatorship (#freebritney).

Once we have the URL it is time to start coding. First things first, let’s create a project folder within our favourite editor containing the following three files:

I am using Visual Studio Code.

Within the index.html file, we can add the basic HTML5 boilerplate, and link the style.css and script.js files like so:

I used the VS Code shortcut “!” followed by enter to create the above HTML skeleton.

We can also add a header to the HTML boilerplate, containing my page title as well as a link to the guardian API website.

In the script.js file, we should begin by storing the URL we got earlier as a CONST at the top of the file. Remember to keep your API key a secret!

To make the HTTP request to the Guardian server, we can use JavaScript’s fetch function. With each fetch request, a so-called promise is created, which must be resolved before we can access and manipulate the data. Promises can take a comparatively long time to be resolved, so we therefore need to explicitly tell our program to await the response of the HTTP request before executing the rest of the code. We can do this by using the ES7’s async/await syntax. Without correct handling of this asynchronous request, it is likely that our code would try to populate our webpage before we receive any information from the Guardian’s server.

Don’t forget to call your function at the bottom of your script so that it is executed!

In the above code you can see that I added a catch block to handle the error if the returned promise is rejected. Opening the index.html file in the chrome using the LiveServer plugin, we can open the console to see whether our promise was rejected or resolved.

If the promise was rejected we would see ‘Error in fetching api data’ written on the console.

As you can see the promise was resolved and converted into a JSON, which was in turn printed to the console. Now that we know that our API call is being fetched successfully, we can begin to unpack the information from the JSON and dynamically inject it into the DOM so that our web page displays the articles nicely.

We can access the information within the JSON as we would with any other JavaScript object. To iterate over each article it’s as simple as calling forEach on the responseData.

We can declare a new constant within the forEach loop to store the content we want to extract from the JSON. In my case I named it articleFormatted, and set its value equal to a new HTML div element, using the document.createElement(‘div’) function.

Calling the innerHTML function on our articleFormatted constant allows us to set the HTML content of our div element. I set it to the following, interpolating the article information as necessary:

I also called the slice function on the webPublicationDate to improve formatting.

I added a few class names to aid with styling and appended the information to the HTML document using the appendChild function: document.body.appendChild(articleFormatted)

Now when we launch LiveServer… Voila! Look at our wonderful JavaScript web app!

Oh dear! All of that effort and our Web App looks as though it was made in the 90s.

Let’s add a bit of CSS styling to smarten things up.

The CSS I used can be found in my GitHub linked below.

Much better! Feel free to check out the code for this project on my GitHub, or click here if you are in need of a personal dose of Nigella Times.

Thanks for reading and happy coding 😘