JSON.parse fails in function, works in console

Question

I have a simple script that does a cross site request and gets data from a GitHub gist. The data from the Github API is returned as a JSON string. To allow further modification of the data, I want it as a JSON object.

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

var tmpJSON = "";
var gistData = "";

var gistID = "5789756";
var gitAPI = "https://api.github.com/gists/"
var gistQuery = gitAPI + gistID;

function incrementGist() {
    gistData = createCORSRequest('GET', gistQuery);
    gistData.send();
    tmpJSON = JSON.parse(gistData.response);
}

In the html page, I have

<p><input type="button" value="Increment" OnClick="incrementGist()"></p>

If I actually hit the button, the error I get is:

Uncaught SyntaxError: Unexpected end of input

But if I subsequently open the console and run this:

var crap = JSON.parse(gistData.response);

it works just fine. This happens in both Firefox and Chrome. I really don't see why the JSON.parse command fails inside a function call, but not in the console. An actual page is set up here

I'd log gistData.response as well, and if it's an empty string, then that is the cause of your problem. — SeinopSys
– SeinopSys, Commented Jun 17, 2013 at 13:36
Classic case of trying to make an asynchronous call act like a synchronous one. — epascarello
– epascarello, Commented Jun 17, 2013 at 13:36

Denys Séguret · Accepted Answer · 2013-06-17 13:35:57Z

3

The problem is that you're trying to read the response before the server answered.

You must read the response in a callback. For example :

gistData = createCORSRequest('GET', gistQuery);
gistData.onreadystatechange = function() {
if (gistData.readyState === 4) {
    if (gistData.status === 200) {
                 tmpJSON = JSON.parse(gistData.response);
                 ... use tmpJSON...
                 ... which should not be called so as it is not JSON...
                 ... maybe tmpObject ?
            }
    }
}
gistData.send();

answered Jun 17, 2013 at 13:35

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TecHunter Over a year ago

yeah well that's exactly it :)

rmflight Over a year ago

That worked great, thank you. I've never worked with network data like this, I just assumed that the function would wait until the response was done. Good to know.

Denys Séguret Over a year ago

The A in AJAX stands for asynchronous. Many patterns in Javascript, like AJAX, make you deal with asynchronous operations and thus with callbacks.

TecHunter · Accepted Answer · 2013-06-17 13:38:41Z

1

That's because you are not waiting the request to actually finish. I don't know your API but try waiting the server response then parse your JSON. you could try with a SetTimeout first to see that it is working but you nee to do something like in jQuery with its' success:function(...) callback

answered Jun 17, 2013 at 13:38

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

JSON.parse fails in function, works in console

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related