An Intro To The Yahoo search API

Now that I have accustomed you to the Google maps api, I now want to show you how to use a basic Yahoo search api using Javascript Object Notation(JSON) and returning the requested data to an alert.

First you need to sign up for a yahoo search API key. Log into your yahoo account and then go to http://developer.yahoo.com/everything.html. On the right hand side of the page, click on Get App ID. You will be prompted to fill out a form in order to receive your personal APP ID which will allow you to successfully use Yahoo's API's. The form looks like the one shown below. Fill in the fields and then click continue. **Pay close attention to what you type into the Web Application Url, in this field put your people.emich.edu website address. (ie. http://people.emich.edu/jguest) By putting in this website address, it will allow you to run the yahoo api's from any webpage that resides under this pathing structure. (ie. http://people.emich.edu/jguest/yahoo/index.html.

Yahoo will send you an email providing you with a link to your own personalized API key.


The next steps will be to program your javascript to make a call to the yahoo search API , retrieve the data in JSON format, and display the data in an alert. For the sake of brevity I have included the code below to perform the steps mentioned above.


By going to the following website, you will see the above code in action with a popup with the name of our book Head First AJAX dynamically pulled from Yahoo. (You can grab the above code by clicking on view source of this website)
http://people.emich.edu/jguest/yahoo.html

Breakdown of Code:
http://shopping.yahooapis.com/ShoppingService/v3/productSearch?
This is default address for Yahoo's shopping search API and must be included for the shopping search

appid=insertyourappidhere
You need insert your appid into the url in order for the search to process successfully

&query=9780596515782
This query can be any item that you are searching on, I chose to use the ISBN of our book

&department=56
This narrowed down the search to a particular department within yahoo's shopping structure(does not need to be included for the search to succeed)

&output=json
Requests the output of the data to be in JSON format. JSON is easier to extract data from in Javascript than XML. (By default the data will be in XML format)

&callback=ws_results
This line tells yahoo to call the function ws_results upon return of the data

Javascript Object Notation is a beast that will need to be tackled in a later post, however I do want to show you what it looks like when returned from the above search.
ws_results ( {"Products":{"Product":[{"__ATTRIBUTES":{"type":"Catalog"},"Catalog":{ "Url":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366", "ProductName":"Head First Ajax:", "PriceFrom":"24.62", "PriceTo":"44.99", "Thumbnail":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif85?rm_____DIt5.XZzN","Height":"85","Width":"74"}, "ListImage":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif85?rm_____DIt5.XZzN","Height":"85","Width":"74"}, "GridImage":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif110?rm_____DwXmgnsZu","Height":"110","Width":"95"}, "Description":"Author: Rebecca M. Riordan. ",
"UserRating":{"MaxRating":5,"RatingUrl":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366:page=user-reviews","CreateRatingUrl":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366:page=post-reviews"},"Department":{"__ATTRIBUTES":{"ID":"56"},"Name":"Books"},"UPC":"0596515782","Relevancy":"9397","__ATTRIBUTES":{"ID":"3005580366"}}}],"__ATTRIBUTES":{"totalResultsAvailable":"1","totalResultsReturned":"1","firstResultPosition":"1"}}} );

By using dot notation as seen in the ws_results function, you are able to traverse the JSON structure and retrieve your data.

Enjoy!!