In this recipe, we make a browser app ask data from a web service (Yahoo stock data) in JSON format, decode that data, and dynamically build up the web page showing the data.
This is what the URL we will use will look like: http://query.yahooapis.com/v1/public/yql?q=SELECT.
To get the data, we use the Yahoo Query Language (YQL), q= indicating the start of the query represented by SELECT. Suppose we want to look up stock data for Yahoo, Google, Apple, and Microsoft, the selected query will be of the following form:
select * from yahoo.finance.quotes where symbol in(YHOO,AAPL,GOOG,CMSFT) &env=http://datatables.org/Falltables.env&format=json
Look at the code in stockviewer_dart:
import 'dart:html';
import 'dart:convert';
main() {
LoadData();
}- Call the web server asynchronously using the following code:
void LoadData() { var stock = "GOOG"; var request = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20" "where%20symbol%20in%20(%22$stock%22)%0A%09%09" "&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json"; var result = HttpRequest.getString(request).then(OnDataLoaded); } - Web service responses callback as shown in the following code:
void OnDataLoaded(String response) { String json = response.substring(response.indexOf("symbol") - 2, response.length - 3); Map data = JSON.decode(json); var table = CreateTable(); var props = data.keys; props.forEach((prop) => ProcessStockEntry(prop, data, table)); document.body.nodes.add(table); } - Create the HTML table with the data as shown in the following code:
TableElement CreateTable() { TableElement table = new TableElement(); var tBody = table.createTBody(); return table; } void ProcessStockEntry(String prop, Map data, TableElement table) { String value = data["$prop"]; var row = table.insertRow(-1); // Add new row to our table var propCell = row.insertCell(0); // Add new cell for property String prophtml = '$prop:'; propCell.setInnerHtml(prophtml); var valueCell = row.insertCell(1); // Add new cell for the value String valuehtml = '$value'; valueCell.setInnerHtml(valuehtml); }
The browser shows the stock data as shown in the following screenshot:
Stock data from the JSON web service
In step 1, the request string is URI encoded, and the stock symbol we want is inserted. Then, the web server is called with the getString method from HttpRequest. Step 2 shows the code that analyzes the response when this has arrived. We extracted the map with the stock data (starting with the symbol) and decoded that JSON string into the map data. We then created an HTML table, and for each of the properties in the stock data (Ask, AverageDailyVolume, Bid, and so on), we inserted a table row with the key and the data in step 3.