Google Finance JSON reply not working in Chrome, Firefox but works in IE 11

Question

I am building a JavaScript application to retrieve STOCK information from Google Finance API.

finance.google.com/finance/info?q=nasdaq:AAPL

If I copy paste the link in the browser then I receive the JSON reply correctly

// [ { "id": "22144" ,"t" : "AAPL" ,"e" : "NASDAQ" ,"l" : "108.51" ,"l_fix" : "108.51" ,"l_cur" : "108.51" ,"s": "0" ,"ltt":"10:48AM EDT" ,"lt" : "Aug 11, 10:48AM EDT" ,"lt_dts" : "2016-08-11T10:48:42Z" ,"c" : "+0.51" ,"c_fix" : "0.51" ,"cp" : "0.47" ,"cp_fix" : "0.47" ,"ccol" : "chg" ,"pcls_fix" : "108" } ]

I tried Yahoo finance url as well. Same issue for that too. This was my 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=

This is my JS Code.

var url = "http://finance.google.com/finance/info?q=nasdaq:";

function getJSONReply() 
{
    var url_req = url.concat(arguments[0]);
    alert(url_req);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() 
{
    if (xhr.readyState == 4 && xhr.status == 200) 
    {
        alert(xhr.responseText.length);
    }
}
    xhr.open('GET', url_req, true);
    xhr.setRequestHeader('Access-Control-Allow-Headers', '*');
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET');
    xhr.addEventListener("load", reqListener);
    xhr.send();
}


function reqListener() 
{
    var sub1 = this.responseText.substring(5,this.responseText.length);
    var sub2 = sub1.substring(0, sub1.length - 2);
    parse_JSON(sub2);
}

PS: Instead of var request even if I add a direct http request string just for the sake of testing the code, still responseText is empty.

xhr.open('GET', "http://ipinfo.io/json", true);

Not sure what is going wrong. Also in Chrome I get readyState as 1 and status as 0, in Internet Explorer I get readystae as 4 and status as 200.*

Possibly same-origin policy? Try querying the API from a server, e.g. curl, instead of client-side js and see if the response is different. P.S. isn't this API deprecated? googlecode.blogspot.com/2011/05/… — James Pan
That's an almost valid JSON, but it has // which will comment out all the JSON. I think is a kind of protection Google done because Finance has no API (developers.google.com/finance/?hl=es). — yuriy636
Also: XMLHttpRequest cannot load https://finance.google.com/finance/info?q=nasdaq:AAPL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access. I would recommend to find another API stackoverflow.com/questions/10040954/… — yuriy636
I am new to JSON development. I tried using normal 'ipinfo.io/json' string instead of finance google link but even then I am having same issue. That is standard request and JSON reply which should work. — Nikhil Redij
@yuriy636 : I formatted the responseText string in IE and it shows the reply correctly but in chrome it does not work at all. I can parse JSON after formatting string but IE displays that original string. Chrome just says response is empty. — Nikhil Redij

10100111001 10100111001 · Accepted Answer · 2016-08-11T15:41:05

There are multiple problems with this process. The first problem is that you are trying to request data with XMLHttpRequest asynchronously but are not handling it as such. The second problem is that when you actually make a request, you will have problem with same-origin policy if you're trying to run this on the client side inside a browser. There is yet another problem with the returned JSON as it is invalid. It has two forward slashes appended to it which makes the parsing of the returned JSON data erroneous.

function getJSONReply(stock) {
  var url = "https://finance.google.com/finance/info?q=nasdaq:";
  var request = url.concat(stock);
  window.alert(request);
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", reqListener);
  xhr.open('GET', request, true);
  xhr.send();
}

function reqListener() {
  console.log(this.responseText);
}

console.log(getJSONReply("AAPL"));

The solution: Since the Google Finance API is no longer available, you can try out other APIs as mentioned in another Stackoverflow post.

Working example:

function getJSONReply() {
  var url = "http://ipinfo.io/json";
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", reqListener);
  xhr.open('GET', url, true);
  xhr.send();
}

function reqListener() {
  console.log(this.responseText);
}

getJSONReply();

Google Finance JSON reply not working in Chrome, Firefox but works in IE 11

2 Answers