If you would like to review what we have learned or discussed so far, here is a summary:
Getting data from the Web using AJAX and JSONP. Chapter 6 in "Head First HTML5 Programming".
See our Google Drive Book Folder.
Questions and answers for understanding the JSON data and the HTML+CSS code
for presenting the data on the page. AM1 Questions
and AM1 Answers.
The overview of all technologies that are used in AM1
all in one page. Particularly, reread the updated HTTP Request
section.
The different components of the Javascript program are described in these notes. You should review the AJAX method to get data asynchronously.
An example of how to create HTML elements dynamically is shown in the
Students page,
look at the Javascript file students.js.
The Google Books Search Web App Structure
Below is how the Book Search app works. Some of the functions mentioned below were
discussed in the AM1 Divide & Conquer notes.
In the Javascript code, there is a function bound to the onclick
attribute of the button which performs these steps:
Grabs the value of the input field (whatever the user entered)
encodes this value, so that it replaces certain characters with their Hexadecimal representation
(e.g., %20 for space, etc.)
creates the request URL by concatenating the Google API base URL with the encoded search query
invokes the function ajaxRequest with the created URL
The function ajaxRequest sends the request and also specifies what should
happen with the response from the server. In our case, this response will be given as an
argument to a function you would have to flesh out displayBooks.
The function displayBooks needs to first parse the response text to a JSON
object (with JSON.parse), so that now we can have a JSON object to work with.
This part is given to you in the notes.
From this JSON object, let's call it, results, you can read the total number
of items, as well as get the book description from the items property.
A for loop will iterate through each book item and show the title, author, thumbnail,
description, and published year on the HTML page.
Instead of having all the code for showing a book's information on the page inside
displayBooks, you can create a helper function, displayOneBook,
which will do that, and be invoked by the for loop with one book's data at a time.
Doing More
There are several ways to make the code more sophisticated and do more things. Some of them
might be desirable or necessary at some point.
You can sort the results by the publishing year, before you display them on the page.
See notes about the sort method in AM1 Divide & Conquer notes.
You can ask the API to return more than the default 10 books, by adding to the URL the parameter:
maxResults=40. Don't forget the ampersand symbol to concatenate to existing parameters in
the URL.
In some occasions, the returned data might not contain a certain expected property. For example,
a book might lack a description field or the thumbnail image. In this case, you might not want to leave
the slot empty, but show something like "No title", or "No description". Here is an example, that
uses the OR operator. If a property doesn't exist, it will return the value after the ||
If you're trying to access a second-level property (see example below), but the first
property doesn't exit, the OR operator trick shown above will not work. In fact, Javascript
will show an error in the console and stop the execution (this is bad, because your books
will not show up in the page). Here is an example in the console:
In this case, the problem arises from trying to access the property name
of the missing property school.
To solve this problem, we'll first need to check if a property exists, by using
the method hasOwnProperty. Here is the solution that will not cause an error:
