Search code examples
javascriptcorsfetch-apiyql

YQL fetch returns empty object

I'm trying to retrieve json from a domain which don't allow CORS and I don't have access to the server to allow it. I have replaced the url with googleapis as an example here. 

  const url = 'https://www.googleapis.com/storage/v1/b/example-bucket/o/foo%2f%3fbar';
  const yUrl = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json';

  fetch(yUrl)
        .then(function(response){
        alert(JSON.stringify(response, null, 4));
    })

If we open the yUrl in browser itself, it works fine: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22https%3A%2F%2Fwww.googleapis.com%2Fstorage%2Fv1%2Fb%2Fexample-bucket%2Fo%2Ffoo%252f%253fbar%22&format=json

However the response alerted (and thus returned) to fetch is empty.

enter image description here

Kindly guide me in the right direction. Thanks.

P.S. I don't want to use jQuery, would prefer JavaScript.

Solution

  • A fetch(…) call returns a promise containing a response object, and to get the JSON from that, you need to use the .json() method, which returns a promise containing the JSON.

    So all together to see the serialized JSON data, you need to do something like this:

    fetch(yUrl)
    .then(response => response.json())
    .then(json => JSON.stringify(json))
    .then(function(json) {
        alert(json);
    })