Showing posts with label JSON. Show all posts
Showing posts with label JSON. Show all posts

Mar 17, 2010

Parsing JSON response with PHP

We are currently trying to tie in the Yelp API into our group project so I thought I would post what we have learned in trying to parse the JSON response. Since JSON is the only response method that Yelp offers, it was imperative that we figure it out. First, the proxy part is the same, meaning that I obtained the response the same way that I did with all of my XML responses. To do this I use this but of code:




After that I use the json_decode() function to convert the data into a searchable format:


NOTE: One nice trick that I learned is to do a var_dump() of the data variable to your output destination. What this does is essentially show you the structure of the JSON response so that you can see the hierarchy of tags. This is similar to just putting your XML URL into firefox in order to see the layout. To do this I use the following snippet of code:



The output will look like this:



After that it is just a matter of figuring out which items you want to retrieve and then grabbing that information. Yelp puts everything under the heading of businesses, which means that I use the following code to access the elements:



So here is the output on the site:


Nov 18, 2009

Parsing Errors

While parsing our xml data to display it, our script sometimes used to stop working. This inpredictable behavior was very strange and it was difficult to find the problem. The error occured at the Ebay part. First we thought that it might be a problem with the Ebay server. Monitoring the parsing gave us only a small hint.
It must be a problem with the picture URL from the articles.
Working through the Ebay-response, we realized that tags "title", "currentPrice", "url" are mandatory. Some tags, like the "galleryURL" are not.

<item>
<title>Best 5 LED Bike Bicycle Tail Light Lamp &amp; Bike Holder</title>
<galleryURL>http://thumbs4.ebaystatic.com/pict/3204463049958080_1.jpg</galleryURL>
<viewItemURL>http://cgi.ebay.com/Best-5-LED-Bike-Bicycle-Tail-Light-Lamp-Bike-Holder_W0QQitemZ320446304995QQcmdZViewItemQQptZCycling_Parts_Accessories?hash=item4a9c1692e3</viewItemURL>
...
</item>
For parsing, we use this code:
var text="<table border='1'>";
for (var j=0;j<xmlData.getElementsByTagName("title").length;j++){
//loop for iterating over the item's title, URL, pic, and price
text=text+"<tr><td><a href='"+
//starting a new table row and starting the link
xmlData.getElementsByTagName("viewItemURL")[j].childNodes[0].nodeValue+
//gets the first URL
"'target=_blank>"+xmlData.getElementsByTagName("title")[j].childNodes[0].nodeValue+"</a></td><br />"+
// gets the first Title
"<td><img src="+xmlData.getElementsByTagName("galleryURL")[j].childNodes[0].nodeValue++" /></td>"+
// gets the first pictureURL
"<td>"+xmlData.getElementsByTagName("currentPrice")[j].childNodes[0].nodeValue+"</td></tr>";}
// gets the first Price, loop starts again, or ends.
text=text+"</table>";
// closing HTML table-tag
appDiv=document.getElementById("itemContent");
appDiv.innerHTML=text;

Today we implemented yahoo shopping. While parsing the shopping articles with this code:
for (i=0;i<Json_data.length;i++)
{
textYa=textYa+"<tr><td><a href='"+
//new tablerow, starting link
Json_data[i].Offer.Url+
//getting URL
"'>"+Json_data[i].Offer.ProductName+"</a></td>"
//getting Product Name
+"<td><img src="+Json_data[i].Offer.Thumbnail.Url+" />
//getting pic URL
</td><td>"+Json_data[i].Offer.Price+"</td></tr>";
//getting price
;}
}
textYa=textYa+"</table>";
YahooDiv=document.getElementById("yelpContent");
YahooDiv.innerHTML=textYa;
We had the same problems with this yahoo like we have with Ebay. We discovered that Yahoo Shopping returns not only "Offers" but "Catalogs" with not usable data. Now, before we try to access the data, we check for an Offers-object. If true, we work on. If not, we skip it. Checking for a picture URL works the same way. If it is undefined, we return only a blank.
With yahoo-shopping, we are working on the objects, things are not that easy with Ebay. As we use the getElementsByTagName()-function, we pick out all tags with the given tag-name.
This means that there are no gaps in the galleryURL. If one item does not have an galleryURL, the system takes the next one. In the case that, at least, one article has no galleryURL, the array of Elements is shorter than the array with the title-tags, causing the exception.
The workaround at the moment is to check for access to undefined variables and to avoid this by returning an empty string. It adds entries in the end of the array, if needed.

Maybe one of you has a good idea how to fix this bug. My idea, taking the item-tags and moving through the childs does not work...

Update:
Now, I got things working. Using try-catch parts allows us to insert a galleryURL everytime an exception is catched.
try {
if (items[no].getElementsByTagName("galleryURL")[0].childNodes[0].nodeValue==undefined) {
gal_Url=" ";} else {
gal_Url=items[no].getElementsByTagName("galleryURL")[0].childNodes[0].nodeValue;
}
}
catch (e) {
gal_Url=" ";
}


Code, written in a try-block is treated specially. If an error appears, the compiler does not stop the script, but it goes to the catch-part of the code. An additional option is to use a finally-part to perform some clean-up works that should be performed in the error or in the usual case.

JSON TreeView

While receiving JSON data its a bit difficult to see the structure. I think you learned that I am very lazy and that I like using tools. I started looking at different tools, for example Charles Proxy. Charles Proxy just copied the received JSON or XML data. With this copy, you can play a bit in Charles. Unfortunately, I was not able to get it formatted into a tree-structure.

Looking for something different, I found a HTML site that displays the JSON data in treestructure.
With this tree structure you can easily navigate through your data. The website shows you the JSON Path, the value of the variable as well as the type of it.




If you need the tool offline, no problem. Here is the link to a zip, containing an HTML file and the scripts. I hope this will make all our life easier. And here is the link!

Oct 29, 2009

Charles Proxy





I want to make everyone aware of another great tool for your coding toolbox,Charles Web Debugging Proxy. Charles Proxy is somewhat similar to Firebug which was mentioned in a previous post by Colin. As stated on the Charles Proxy website http://www.charlesproxy.com/, "Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information)."


Some Feature of Charles Proxy:


Browser Agnostic
For all you die hard browser fanatics out there (insert Matt Mager's name here) Charles Proxy works out of the box with IE, Firefox (Need to download an extension), and Opera

Operating System Agnostic
Runs on Windows, MAC OS, and LINUX

SSL Proxying - View SSL requests and responses in plain text

bandwidth Throttling - Simulates slower internet connections including latency
This is a great feature when you want to test out your web development with the bandwidth simulation of one of your target users

AJAX Debugging - Supports XML and JSON natively so you can View XML and JSON requests and responses as a tree or text. This feature would have come in handy when I was having issues retrieving JSON data for the second iteration of my personal project

Breakpoints to intercept and edit requests or responses -
You are able to insert a break point and edit requests to test different inputs

Validate recorded HTML, CSS, and RSS/atom responses using the W3C validator

Charles Proxy comes with a 30 day trial where at the end of the trial you will have to purchase for $50.00. From a business standpoint the $400 site license or $700 multi-site license seem the best way to go.

Just to reiterate Charles Proxy supports AJAX Debugging so can youcan so you can View XML and JSON requests and responses as a tree or text.
Enjoy!!!

Oct 12, 2009

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