0

I am trying to build an application called myApp which has the property regularNameErrors and the Method populateJSON which uses an AJAX call to get a JSON object which is then added to the property declared as one of the arguments to the method.

The function to get the data definitely works because the alert at position 3 gives the correct list of keys. however the alert at 1 returns undefined and the alert at 2 blank.

When I replace the line destination = data with myApp.regularNameErrors = data again it works so I assume that I have misunderstood how to pass object properties to object methods. However I want to use the method populateJSON several times and need to know the correct way to pass it properties.

var myApp = {
init: function () {
    myApp.populateJSON(myApp.regularNameErrors, 'data/spelling.json').done(function () {
        alert(myApp.regularNameErrors['kingscross']); //1
    });
},
regularNameErrors: {}, //Object of spelling mistake:proper key:value pairs
populateJSON: function (destination, source) {
    var def = $.Deferred();
    $.getJSON(source, function (data) {
        destination = data;
        alert(Object.keys(myApp.regularNameErrors)); //2
        alert(Object.keys(data)); //3
        def.resolve();
    });
    return def.promise();
},
};
4
  • You assign regularNameErrors as an empty object and then never add any properties, so that's why the code shown gives undefined for myApp.regularNameErrors['kingscross'] and blank when you list the keys in an alert. When you say you want to call populateJSON() several times, do you mean you want each call to add additional data to regularNameErrors, or you want each call to replace the previous value?
    – nnnnnn
    Oct 4, 2013 at 9:13
  • Also, you don't need a contrived deferred object; all AJAX/JSON-P requests in jQuery are examples of deferred, so you can just do return $.getJSON(...
    – Mitya
    Oct 4, 2013 at 9:15
  • I want to use 'populateJSON' to fill several different properties not shown here. I declare 'regularNameErrors' as empty but then use it as the destination input to 'populateJSON' so that the result of the getJSON call is the new value for 'regularNameErrors' Oct 4, 2013 at 9:25
  • @utkanos Just to confirm the deferred part of the AJAX request will only respond to done when the ajax call and the function that runs after the ajax call are complete Oct 4, 2013 at 9:27

2 Answers 2

0

With the ability to use the deferred properties of the returned getJSON object the functions can be reduced to a few lines such that it is not necessary to create a new function called populateJSON

var myApp = {
init: function () {
    $.getJSON('data/spelling.json').done(function(data) {
        myApp.regularNameErrors = data;
    });
},
regularNameErrors: {},
};
0

destination is no "pointer" to the property that you passed into the function, but a variable holding the value which the property evaluated to. When you assign to destination, you just write to the local variable of your populateJSON function.

If you want to be able to declare the destination, you would need to pass a base object (or always use myApp) and a property name:

var myApp = {
    init: function () {
        myApp.populateJSON('regularNameErrors', 'data/spelling.json', function() {
            alert(Object.keys(myApp.regularNameErrors)); //2
            alert(myApp.regularNameErrors['kingscross']); //1
        });
    },
    regularNameErrors: {}, //Object of spelling mistake:proper key:value pairs
    populateJSON: function (destinationName, source, callback) {
        $.getJSON(source, function (data) {
            myApp[destinationName] = data;
            alert(Object.keys(data)); //3
            callback();
        });
    }
};

However, I see you are using the promise pattern. A promise should not be used as a simple notifier ("now the data has arrived somewhere"), but it should represent the data itself ("now, here's the data") - resolve it with the data instead of storing the data in a global variable/property and resolving with nothing. Actually, the $.ajax does already return such a promise so you don't have to do much for it:

var myApp = {
    init: function () {
        myApp.regularNameErrors = $.getJSON('data/spelling.json');
        myApp.regularNameErrors.done(function(data) {
            alert(Object.keys(data)); //3
            alert(data['kingscross']); //1
        });
    }
};
4
  • So the alert where to check it was working and to find the source of the error. would it be possible to use the line 'myApp.regularNameErrors = $.getJSON('data/spelling.json').done();' Oct 4, 2013 at 10:52
  • Yes, that's a possible shortcut - .done returns the promise it was called on.
    – Bergi
    Oct 4, 2013 at 10:54
  • How do I return just the data to the property? sorry if these are getting silly questions now I will sit down and read about promise's more carefully Oct 4, 2013 at 10:58
  • You could do like in your answer, but I'd recommend to cache the promise itself in the property and use .then/.done always when accessing it. Of course, this will make all of your code async, but you could call methods that use the promise right after init().
    – Bergi
    Oct 4, 2013 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.