Yahoo JSONP Ajax Request Wrapped in callback function

Question

I understand that I can make a crossdomain ajax call with jquery, .ajax, and jsonp. I am calling the yahoo stock quote api. Everything is working and the result is returning (I can see using Fiddler.) The problem is I get a js error YAHOO is undefined. I think its having problems because the JSON is formated within a callback function so its not correct json syntax. What can I do to fix it? Thanks: Here is the code:

     $.ajax({
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback',
            data:{
                query: request.term
            },
            url: 'http://autoc.finance.yahoo.com/autoc',
            success: function (data) {
                alert("yes");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });

Answer 1

I wanted to add this answer since it looks like user209245's answer above (which is from 2011) no longer works. Here's how I did it:

1. Use the YQL Console to build a query for the stock you want to get, eg Apple:

   select * from yahoo.finance.quotes where symbol="AAPL"

2. Make sure JSON is selected and specify a JSONP callback, eg quote
3. Click Test

4. Plug in the REST query that it generates for you like this:

    var quote; $(document).ready(function() { $.ajax({ url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22AAPL%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=quote", dataType: "jsonp", jsonp: "callback", jsonpCallback: "quote" }); quote = function(data) { $(".price").text("$" + data.query.results.quote.AskRealtime); }; });

   Then on your page the .price <div> would display:

    $543.21

Of course, once you get the data back you can display anything you want; I'm just using price as an example since that's what I needed this for.

Answer 2

Here is how I got it to work:

I used.ajax instead of.jsonp because you need to give the url parameters. You also need to define in your code the name of the Yahoo callback function. Here is a link explaining how to use Yahoo callback function with its web services.

http://developer.yahoo.com/javascript/json.html#callbackparam

Here is the code:

<script type="text/javascript">
    // this variable must be defined this way
    var YAHOO = {
        Finance: {
            SymbolSuggest: {}
        }
    };

    $(document).ready(function(){           
        var query;

        query = 'Yahoo';        
        if (query.length > 0)
        {

          $.ajax({
              type: "GET",
              url: "http://d.yimg.com/autoc.finance.yahoo.com/autoc",
              data: {query: query},
              dataType: "jsonp",
              jsonp : "callback",
              jsonpCallback: "YAHOO.Finance.SymbolSuggest.ssCallback",
          });
          // call back function
          YAHOO.Finance.SymbolSuggest.ssCallback = function (data) {
            alert(JSON.stringify(data));
          }
        }

    }); 


    </script>   

Answer 3

Here's an amended version that worked for me:

$(document).ready(function() {
    $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22AAPL%22)%0A%09%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=quote",
        dataType: "jsonp"
    });

    window.quote = function(data) {
        console.log(data);
    };
});

Answer 4

Here is a js fiddle for this: https://jsfiddle.net/vham369w/1/

using $.getJson instead of $.ajax

JS

$(document).ready(function() {
    var symbol = 'AAPL'
    var url =  "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22"+symbol+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    $.getJSON(url + "&callback=?", null, function(data) {
        console.log(data);
        $("#realtime").text("$" + data.query.results.quote.AskRealtime);
        $("#ask").text("$" + data.query.results.quote.Ask);
    });
});

HTML

Ask:
<div id="ask">
    loading ask
</div>
Realtime (null if market is closed):
<div id="realtime">
    loading realtime
</div>

Answer 5

Here is the working example: See the callback=? at the end of my query to make it work. This example can be copied past as a standalone html.

https://github.com/cirs/PortfolioApp/blob/master/PortfolioApp-Step1-GetData.html