Get stock quotes from yahoo finance in json format using a javascript

Question

I was trying to get stock quotes from yahoo api. My input to the query is only a stock ticker ( from a text field). On button click the background JavaScript method "getprice()" is called. I have a java script code that looks like this

function getprice()
{
    var symbol = $('#stockquote').val();


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

    $.getJSON(url, function (json)
    {

        var lastquote = json.query.results.quote.LastTradePriceOnly;
        $('#stock').text(lastquote);

    });
}

 $('#stock').text(lastquote); 

Here "stock" is the text field where I want to display the LastTradePriceOnly for the given ticker.

I do not see any output turning up. Debugging also does not show up any errors. Can I get any suggestions with this issue?

Answer 1

Try this.

function getData() {
    var url = 'http://query.yahooapis.com/v1/public/yql';
    var symbol = $("#symbol").val();
    var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('" + symbol + "')");

    $.getJSON(url, 'q=' + data + "&format=json&diagnostics=true&env=http://datatables.org/alltables.env")
        .done(function (data) {
            $('#result').text("Price: " + data.query.results.quote.LastTradePriceOnly);
        })
        .fail(function (jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.log('Request failed: ' + err);
        });
}

Here I also added working example for you.

Answer 2

This is how it's done in AngularJS in case you need it:

In your view:

<section ng-controller='StockQuote'>
    <span>Last Quote: {{lang}}, {{lastTradeDate}}, {{lastTradeTime}}, {{lastTradePriceOnly}}</span>
</section><br>

In your controller: The stock symbol name is passed via $scope.ticker_name to service method 'getData.getStockQuote'.

appModule.controller('StockQuote', ['$scope', 'getData',
function($scope, getData) {
    var api = getData.getStockQuote($scope.ticker_name);
    var data = api.get({symbol:$scope.ticker_name}, function() {
        var quote = data.query.results.quote;
        $scope.lang = data.query.lang;
        $scope.lastTradeDate = quote.LastTradeDate;
        $scope.lastTradeTime = quote.LastTradeTime;
        $scope.lastTradePriceOnly = quote.LastTradePriceOnly;
    });
}]);

In your service:

appModule.service('getData', ['$http', '$resource', function($http, $resource) {
    // This service method is not used in this example.
    this.getJSON = function(filename) {
        return $http.get(filename);
    };
    // The complete url is from https://developer.yahoo.com/yql/.
    this.getStockQuote = function(ticker) {
        var url = 'http://query.yahooapis.com/v1/public/yql';
        var data = encodeURIComponent(
            "select * from yahoo.finance.quotes where symbol in ('" + ticker + "')");
        url += '?q=' + data + '&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
        return $resource(url);
    }
}]);