Create Javascript Object with methods and class from deffered JSON request

Question

I want to create an object with global scope which has data loaded from an external JSON file. I want to use the data in this object once the document has loaded. i.e not wait for user input. I am trying to use the jquery differed method. I assume that the Jquery get method generates the appropriate differed object for me to use later. The code for declaring the object is below

var myData = {
init: function () {
    $.getJSON('data/data.json', function (raw) {    
        myData.data = raw; 
        alert(myData.data['UWLO']['name']);
        yes = true;
        $.each(raw, function (code, details) {
            if (yes){
                alert(code);
            }
            yes = false;
            nameList[details.name] = code;
        });
        //alert(nameList);
    });
},
data: {},
nameList: {},
findByCode: function (code) {
    return myData.data[code];
},
getCode: function (name) {
    return nameList[name];
},
getNameStrings: function () {
    return Object.keys(nameList);
}
}

The code as it appears to initialise the object is

$(document).ready(function () {
    $.when(myData.init()).then(function () {
        alert(myData.nameList);
    });
});

The alert(myData.data['UWLO']['name']); request gives the correct value so the json file is loaded correctly and of the correct format the alert(code); line works so the script correctly enters the loop I think the problem lies with generating nameList

Jason P · Accepted Answer · 2013-09-12 13:23:04Z

3

You're close. $.ajax functions return a deferred object's promise. So you have to return that from your init function to be able to use it later. Try this:

init: function () {
    return $.getJSON('data/data.json', function (raw) {

You can also simplify the other snippet:

myData.init().done(function() {
    //...
});

Edit - Actually, in order to be explicit about the order the callbacks occur (in case this is more complex in your actual solution), creating your own deferred object like this might be better:

init: function () {
    var def = $.Deferred();
    $.getJSON('data/data.json', function (raw) {    
        myData.data = raw; 
        alert(myData.data['UWLO']['name']);
        yes = true;
        $.each(raw, function (code, details) {
            if (yes){
                alert(code);
            }
            yes = false;
            nameList[details.name] = code;                
        });
        //alert(nameList);
        def.resolve();
    });
    return def.promise();
},

answered Sep 12, 2013 at 13:23

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

4 Comments

Peter Saxton Over a year ago

Just to clarify $.getJSON() is asyncrous so the return def.promise(); will execute first and the variable def will be resolved when def.resolve() is called. why to you pass def.promise() out of the function rather than the variable def

Jason P Over a year ago

The promise is missing some functions, like resolve. It's a way of making sure that external functions can't resolve your deferred before you intend for it to be done. See deferred.promise()

Peter Saxton Over a year ago

Thanks this is helping to explain differed jquery but it is still not working. is nameList correct created as a dictionary for use in the init function

Jason P Over a year ago

You're referencing myData.data, but only nameList. Those should probably be the same. Try myData.nameList.

Collectives™ on Stack Overflow

Create Javascript Object with methods and class from deffered JSON request

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related