Given the following:

$(function() {
    function getTopMod(e) {
        var requesturl = '/r/lol/about/moderators.json';
        console.log(requesturl);
        var response = $.getJSON(requesturl);
        console.log(response);
        var responsedata = response.responseJSON;
        console.log(responsedata);
        var mods = responsedata.data.children;
        try {
            var topmod = mods[0].name;
            var url = document.location.origin + "/user/" + topmod;
        } catch(err) {
            var url = document.location.origin + requesturl;
        }
        console.log(url);
        //return false;
    }
    $(document).on("click", 'li.view-top-mod a', getTopMod)
});

The request url is logged properly; and so is response. But when trying to log responsedata, it is undefined (and as such, an error is thrown on the next line, as there is no data attribute). However, If I were to type these lines manually in the browser console:

var foo = $.getJSON('/r/lol/about/moderators.json');
var biz = foo.responseJSON;
biz

the responseJSON object is returned (if that's the right term) properly? And how would I resolve the error?

Given the following:

$(function() {
    function getTopMod(e) {
        var requesturl = '/r/lol/about/moderators.json';
        console.log(requesturl);
        var response = $.getJSON(requesturl);
        console.log(response);
        var responsedata = response.responseJSON;
        console.log(responsedata);
        var mods = responsedata.data.children;
        try {
            var topmod = mods[0].name;
            var url = document.location.origin + "/user/" + topmod;
        } catch(err) {
            var url = document.location.origin + requesturl;
        }
        console.log(url);
        //return false;
    }
    $(document).on("click", 'li.view-top-mod a', getTopMod)
});

The request url is logged properly; and so is response. But when trying to log responsedata, it is undefined (and as such, an error is thrown on the next line, as there is no data attribute). However, If I were to type these lines manually in the browser console:

var foo = $.getJSON('/r/lol/about/moderators.json');
var biz = foo.responseJSON;
biz

the responseJSON object is returned (if that's the right term) properly? And how would I resolve the error?

• javascript
• request
• response

• have you tried to log foo ? – webdeb Commented Nov 16, 2015 at 1:41
• 1 @13steinj - getJSON is an asynchronous operation - try to add a callback for done or success of your getJSON operation - then you should be able to access the returned data. – marek Commented Nov 16, 2015 at 1:43
• JS is not PHP, its event driven, otherwise the UI will stuck as long as the request is passing millions of kilometers of copper wire.. – webdeb Commented Nov 16, 2015 at 1:51

2 Answers 2

$.getJSON is asynchronous. That means, you tell it to fetch things, then it delivers some time later. If you do it in the console, it has enough time to run the errand before you ask for results. If you do it in code the way you did, you ask it to fetch the data, then immediately ask for the data back; but you're asking the thin air, as the JSON getter is still out on the errand. You need to let it tell you when it's done:

$.getJSON(requesturl, function(response) {
  // everything your code had after `$.getJSON` goes in here.
});

var jqXHR = $.getJson('some url');
jqXHR.plete(function(response) {
  console.log(response);
});

or

$.getJson('some url', function(response) {
  console.log(response);
});

http://api.jquery./jquery.getjson/