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.
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.