Welcome back to this introduction on RESTful web services. Last week we learned how to make a request and return the same response as both XML and JSON. Today we will look at parsing the XML data to display to our users. Next week, we will parse the JSON and compare the differences between these two styles. If you remember from last week, I had you take the data we got back and represent it as just plain text (which was fairly difficult to read). Today I will show two techniques to looking at the data in a structured format. One will use the tool that I spoke about on last weeks Code Tip Tuesday, Postman, and the other will focus on the use of Chrome Dev tools. So let’s dig in.

Before we start changing any of our code, I want you to go ahead and download the Postman app.  After you have downloaded the app, click New (top left corner), and then click Request. Now open up your code file from last week in Chrome and open up the Dev Tools. Make sure you are on the Network tab. Now, in your search fields type “animals” for the Title an “3” for the Maximum Results and click Get Books. Again, you will see the two requests for XML and JSON. Right click on the first request (the one for XML), click Copy, and then Copy Link Address. Now, go back to the Postman app. Make sure GET is selected for the request type, and in the bar next to it paste the link that you just copied and click Send. If all went OK, you will see a status code of 200 and the returned XML file in a nice Pretty format. Start looking at the document, and using the arrows on the left, click to collapse the tags named “items”. Notice, that there are three of these items tags. Within each of these items, is the information pertaining to each of the three books included in our search. Expand the first items tag and look at all the information that we got back. You can see things like the title, authors, description and so on. If you look further, you will see there are even links imbedded in the document for images, a preview, and info about the book. Now that you have a feel for the structure of the XML, let’s start writing some code.

Take a look at the HTML document below. Notice, that we are making a couple of small changes from last week.  Instead of the textarea tag that we used to display the data as text, we are using an empty table tag for both the XML and JSON. As I said before, we will be focusing on the XML this week. If you followed along with my last tutorial, we dynamically created a table with our JavaScript to display information to the user. We will do the same thing here, using a slightly different technique.

Let’s start making some changes to our JavaScript file. Notice below, that I have deleted all references to the JSON request that we made last week. I did this so that it is easier for us to focus on the XML. On line 7, we set a variable that references our empty table tag from the HTML. Next, we set any innerHTML to an empty string in case the user has conducted another search. And next, we create an array of tableHeaders. This is all the information about the books that we are going to display. I would like you to change some of these, or add additional columns, so that you can test yourself that you understand how to get information out of the XML. Next we create a variable called thead and set it equal to the opening tag of a table header. In our last tutorial, we accomplished this same goal by using the document.createElement method. This is just another way to accomplish the same goal. The browser will read and render the tag as HTML. Now, let’s look at the changes to our HTTP request.

In the request I am creating an empty array and then setting it equal to the items tags within the XML. By doing this, I am creating an array with each element being a book from our search. To better see this in action, load the file into Chrome and set a breakpoint on booksArray = XMLText.getElementsByTagName(‘items’). If you are not quite sure how to do this, take a look at my introduction to the Chrome Dev Tools from my last tutorial.  Enter booksArray into the watch window and interrogate the variable. You will see that it has three elements. If you click the arrows to expand the items, you will see the same information about the books as you saw in Postman. The difference being, that we have now separated them out, which will make them easier to iterate over. Now, back to our JavaScript.

Look at line 36. Here we are taking our array of tableHeaders and creating and appending them to the thead tag. This will generate the headers for each column of our table. On line 42, we add a closing tag to the thead variable, and the append it to the table. Now we need to create our rows. Here we are iterating over each item in our array, or each book. For each book, we are creating a row, and cells within the row. I separated the tr and td variables, to try and show more clearly what is happening in this loop. Here we are just dynamically creating HTML elements as a string variable for our table. When the browser reads the string, it will interpret it as HTML and render it accordingly. Notice how we are using the source attribute from the image tag to the link for the image supplied in the XML. Further notice that we are using two anchor tags with the href attribute set to the the previewLink, and infoLink form our XML. Here we are creating links out to the text on Google for our user to preview and get more information about the book. Finally, we append the cells to the row, and the row to our table.

And now we have made a request, parsed the XML, and displayed it to our user. Next week we will focus on doing the same thing with the JSON that we returned. And you will notice why many APIs are transitioning away from XML, and tending to more often use JSON. Until next week, mess around with the XML, and try to generate some different or additional columns to the table. As always, comment below with any questions, and remember to share on your favorite social medial platform. 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