Welcome back! Last week we learned about getting our request back in XML, parsing the data, and displaying it to the user. Today, we will do something similar, but with a different approach. Instead of XML, we will parse the JSON data that we got back. You will see how we can create JavaScript objects from our data, thereby having the ability to access information about the object through the dot property notation. The objects that we will be working with will be books. So, books have several properties, such as title, author, publisher and so on. And we can simply access the title with the book.title syntax. So, let’s start digging in.

Remember that last week I had you add two empty tables to you HTML file that we were going to use to house our return data. We had one for the XML and one for the JSON (seen below). Today, we are going to start moving away from the XML data structure. You will see as we start to use JSON, how much easier and cleaner it is than dealing with XML. One of the main reasons for this, is that XML is less standardized. Meaning, the data you want may be an attribute of a tag, or the inner HTML of the tag. It really depends on who is controlling the data and their preferences. JSON is more standardized, in that you have objects, and these objects contain properties. For these reasons, and many others, more people are tending toward the use of JSON. So, that is what we will focus on for the remainder of this application. In saying that, you can go ahead and delete the tblOutputXML table from the HTML file.

Now, let’s dig into the JavaScript, and how we parse that JSON that came back from our request. Notice, that similar to how we started with the XML output, we are creating an array to house our books. Again, this will make it easy to iterate over when we display the information in the output table. The difference comes in where we use the JSON.parse method. The response that we get back from the web server is a string. So, using the JSON.parse method converts the string to a JavaScript object. Now, the object that we have contains all our books as well as some additional information pertaining to the request. However, we want to pull out all the books as their own objects. For this we iterate over the JavaScript object, looking for the items at indexes 0 through our maxResult minus 1. Remember, when we worked on the XML that we found our books under the tag items. Here, we are accomplishing the same thing with using the JavaScript object.properties notation.  As you did with the XML from last week, you can make the request in Chrome with the Dev Tools open. Look at the request in the network tab and copy the URL into Postman. Send a GET request and you will see the formatted JSON come back. Here, you can see that each item is a book from our request.

Next, we create the headers just as we did before. Then we append the headers to the table. Now, we must create the rows for the table. Just as we did with the XML, we iterate through our array of books. The difference here is that we are using JavaScript objects instead of XML. So, we again use the object.properties syntax to access data within our objects. Notice, that for both the previewLink and the infoLink I have added some additional attributes in the anchor tag. The target and rel attributes are added to make sure when the user clicks on the link, it will open in another tab in their browser. This is a way that we can avoid the more complex issue of data persistence if our user was to click the back button after accessing one of the links. Lastly, as before, we append all the cells to the rows, and all the rows to the table.

And now you know how to make a simple request to a RESTful web service and parse the data in both XML and JSON. Now that the page is fully functional, we will begin to add some style to the page. Last time we used Bootstrap and some simple CSS to perform this task. Next week, we will dig into SASS, and how we can write more complex logic that will compile into CSS. If you have any questions, please use the comment section below. And remember to share this post on your favorite social media platform. Until next week, try and add some additional columns to your table to display more information about each book. Test your knowledge and your skills. See you next week.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s