JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<body>
<div id="resultContainer">
</div>
</body>
JavaScript
$(document).ready(function(){
var symbols = symbols || ['GOOG','A','AA','AAN'];
var yqlUrl = "http://query.yahooapis.com/v1/public/yql";
var historicalUrl = 'http://finance.yahoo.com/d/quotes.csv';
var queryTemplate = _.template("select * from csv where url='" + historicalUrl + "?s=<%= symbol %>&f=n0s0l1' and columns='name,symbol,LastTradePriceOnly'");
var resultPlaceholderTemplate = _.template(
'<li id="<%= id %>">Please wait, Loading quotes...</li>');
var resultContentTemplate = _.template(
'<ul>'
+ '<li>'
+ '<%=result.name %>'
+ '<%=result.symbol %>'
+ '<%=result.LastTradePriceOnly %>'
+ '</li>'
+ '</ul>');
// display the results of the query, replacing the 'loading' placeholder
function displayResult(id, queryResult, symbol) {
console.log(id);
console.dir(queryResult.row);
var resultsAsHtml = resultContentTemplate({result: queryResult.row, symbol: symbol});
console.log(resultsAsHtml);
$('#' + id).html(resultsAsHtml);
}
_.each(symbols, function(symbol) {
var resultId = _.uniqueId();
// lay down a placeholder
$('#resultContainer').append(resultPlaceholderTemplate({id:resultId, symbol:symbol}));
$.ajax({
url: yqlUrl,
data: {q: queryTemplate({symbol:symbol}), format: 'json'},
context: $('#resultContainer')
}).done(function(output) {
var response = _.isString(output) ? JSON.parse(output) : output;
console.dir(response.query.results);
displayResult(resultId, response.query.results, symbol);
}).fail(function(err) {
console.log('the thing failed with an error');
console.log(err.responseText);
});
});
});