Learn2Develop.Net: Javascript Tutorial

One of the commonly performed tasks in Javascript is accessing JSON services. However, due to the nature of JSON, it is often not easy to parse the JSON result.

In this tutorial, you will learn how to access a JSON service that returns the prices of stocks. The Yahoo API is one such service. To use it, call it with the following query string:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22YHOO%22%2C%22AAPL%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json

In the above string, the stock symbols are bolded – YHOO (Yahoo) and AAPL (Apple). The %22 surrounding the stock symbols is the URL encoded equivalent of the double quote (“) and the %2C is the equivalent of the comma (,). Hence, the above snippet of:

(%22YHOO%22%2C%22AAPL%22)

is the same as:

("YHOO","AAPL")

If you want the price of additional stocks, simply add more symbols separated with commas, like this:

("YHOO","AAPL","MSFT","FB")

The Yahoo API service returns the result of the query as a JSON string. Here is one sample result:

As you can see, this is not easily readable. Parsing this JSON result and trying to extract useful information from it is not a straight forward task. Here is one way to make your live easier.

Create a HTML file (name it StockPrices.html) and add in the following code:

<html>

function getStockPrice() {

var req = new XMLHttpRequest();

req.open('GET',

'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22YHOO%22%2C%22AAPL%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json', true);

req.onload = function(e) {

if (req.readyState == 4 && req.status == 200) {

if(req.status == 200) {

var response = JSON.parse(req.responseText);

alert("Set breakpoint here");

} else {

console.log("Error");

}

req.send(null);

}

</script>

</html>

Essentially, the Javascript code uses the XMLHttpRequest() object to query the Yahoo API service. When the result is returned, you use the JSON.parse() method to convert the JSON string into a JSON object. The challenge would be to discover the various properties and objects contained within this JSON object.

For this, you can use the Chrome browser (you can also use Safari on the Mac). When Chrome is loaded, click on the button on the right-side of the window and select Tools | Developer Tools:

In Chrome, load the StockPrices.html document that you have just created.

At the bottom of the screen, click on the Sources tab:

Click on the Show navigator button:

You will now see the Navigator. Select the StockPrices.html file:

The content of StockPrices.html will now be displayed. Clicking on the line number column will set a breakpoint at the particular line:

In this case, you want to set a breakpoint after the response from the Web service has been parsed to a JSON object.

Reload the page to run the script again so that the debugger can now stop at the breakpoint:

On the right-side of the window, expand on the response variable and notice that it has several layers of properties. Expand each layer and look for the information that you want. In this case, we are looking for the stock symbol and bid price. Observe that the response object has a query object, which in turn contains the results object. The results object contains the quote array, which contains two objects. You can now see that the first object has a property named Bid, which is the bidding price of the stock. As you scroll down, you will be able to find the symbol property, which is the symbol for the stock:

You can now add in the following snippets of code to retrieve the stock and bid price of Yahoo and Apple:

<html>

function getStockPrice() {

var req = new XMLHttpRequest();

req.open('GET',

req.onload = function(e) {

if (req.readyState == 4 && req.status == 200) {

if(req.status == 200) {

var response = JSON.parse(req.responseText);

//alert("Set breakpoint here");

for (i=0; i<response.query.count; i++) {

alert(

response.query.results.quote[i].Symbol +

" - $" +

response.query.results.quote[i].Bid);

}

} else {

console.log("Error");

}

req.send(null);

}

</script>

</html>

Reload the HTML page without the breakpoint. You should now see the price of the stocks you want:

Learn2Develop.Net

Thursday, March 27, 2014

Javascript Tutorial - Using JSON Services

No comments: