Want to update Object in Callback, gives correct log, but global Object is not updated

Question

I am fairly new to using callback functions in Javascript. I'm also not sure, if the callback is my problem.

I fetch some data from a Database and want to save it to a Objekt with the .push method.

After pushing it in there I log this object and it logs the correct data. So the databaseconnection can't be the problem.

I'm working with kinda a model-view-controller model and want the controller to pass data from the model to the view component. If I try the Models get-method I get an empty object.

I tried to find out where the data gets lost by logging as you can see in the init-function where getData() gets called. This log already returns a "undefined undefined".

Has anyone an idea why this happens or does anyone see a principal missunderstanding of my usage of callback methods or so?

I would really appreciate some help here.

Thanks in advance ;)

DetailStart.Detail = (function() {
    var that = {},

    vermieterDataObject = null,
    erstellerDataObject = null,
    objektDataObject = null,

    vermieterData = null,
    einstellerData = null,
    objektData = null,

    objectId = null,

    init = function() {
        console.log("init Detail.js");

        setupParse();

        getData(function(){
            console.log(einstellerData);
            console.log(vermieterData);
            $(that).trigger("setWohnungsDetails");
        });


        return that;
    },

    getData = function(callback) {

        getObjektData(function(einsteller, vermieter){
            getVermieterData(vermieter);
            getEinstellerData(einsteller);
        });

        callback();
    },

    getEinstellerData = function(einsteller){
        einstellerData = [];

        var queryEinsteller = new Parse.Query(erstellerDataObject);

        queryEinsteller.equalTo("ID", parseInt(einsteller));

        queryEinsteller.first({
          success: function(einsteller) {

            var vorname = einsteller.get("Vorname");
            var nachname = einsteller.get("Nachname");
            var strasse = einsteller.get("Strasse");
            var hausnummer = einsteller.get("Hausnummer");
            var plz = einsteller.get("PLZ");
            var ort = einsteller.get("Ort");
            var email = einsteller.get("Email");
            var telefon = einsteller.get("Telefon");

            einstellerData.push({ vorname: vorname, nachname: nachname, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, email: email, telefon: telefon });

            console.log(einstellerData);
          },
          error: function(error) {
            alert("Error: " + error.code + " " + error.message);
          }
        });
    },

    getVermieterData = function(vermieter){
        vermieterData = [];

        var queryVermieter = new Parse.Query(vermieterDataObject);

        queryVermieter.equalTo("ID", parseInt(vermieter));

        queryVermieter.first({
          success: function(vermieter) {

            var vorname = vermieter.get("Vorname");
            var nachname = vermieter.get("Nachname");
            var strasse = vermieter.get("Strasse");
            var hausnummer = vermieter.get("Hausnummer");
            var plz = vermieter.get("PLZ");
            var ort = vermieter.get("Ort");
            var email = vermieter.get("Email");
            var telefon = vermieter.get("Telefon");

            vermieterData.push({ vorname: vorname, nachname: nachname, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, email: email, telefon: telefon });

            console.log(vermieterData);
          },
          error: function(error) {
            alert("Error: " + error.code + " " + error.message);
          }
        });
    },

    getObjektData = function(callback) {

        objectId = localStorage.getItem("currentWohnung");

        objektData = [];

        var queryObjekt = new Parse.Query(objektDataObject);

        queryObjekt.get(objectId, {
          success: function(wohnung) {

            var vermieter_id = wohnung.get("Vermieter_id");
            var einsteller_id = wohnung.get("Einsteller_id");
            var strasse = wohnung.get("Strasse");
            var hausnummer = wohnung.get("Hausnummer");
            var plz = wohnung.get("PLZ");
            var ort = localStorage.getItem("selectedStadt");
            var bild = wohnung.get("Bild");
            var flaeche = wohnung.get("Flaeche");
            var freitext = wohnung.get("Freitext");
            var gesamtmiete = wohnung.get("Gesamtmiete");
            var kaution = wohnung.get("Kaution");
            var miete = wohnung.get("Miete");
            var nebenkosten = wohnung.get("Nebenkosten");
            var raucher = wohnung.get("Raucher");
            var zimmer = wohnung.get("Zimmer");


            objektData.push({ vermieter_id: vermieter_id, einsteller_id: einsteller_id, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, bild: bild, flaeche: flaeche, freitext: freitext, gesamtmiete: gesamtmiete, kaution: kaution, nebenkosten:nebenkosten, raucher: raucher, zimmer: zimmer });

            console.log(objektData);

            callback(einsteller_id, vermieter_id);
          },
          error: function(object, error) {
            console.log("error" + error);
          }
        });



    },

    getObjekt = function() {
        return objektData;
    },

    getVermieter = function() {
        return vermieterData;
    },

    getEinsteller = function() {
        return einstellerData;
    },

    setupParse = function() {
        Parse.initialize("ApplicationKey");

        objektDataObject = Parse.Object.extend(localStorage.getItem("selectedStadt"));
        erstellerDataObject = Parse.Object.extend("Anbieter");
        vermieterDataObject = Parse.Object.extend("Vermieter");

    };

    that.getObjekt = getObjekt;
    that.getVermieter = getVermieter;
    that.getEinsteller = getEinsteller;
    that.init = init;

    return that;
})();

I tried it with a Promise. But I guess I don't exactly understand how this works. Even after checking several blogs about this topic.

Here is my try:

init = function() {
        console.log("init Detail.js");

        setupParse();

        getData().then(function(){
            console.log(einstellerData);
            console.log(vermieterData);

            $(that).trigger("setWohnungsDetails");
        });

        return that;
    },

    getData = function() {

        var promise = new Promise();

        getObjektData(function(einsteller, vermieter){
            getVermieterData(vermieter);
            getEinstellerData(einsteller);
        });

        promise.resolve();

        return promise;
    },

Can anyone help me and tell me what I missunderstood here please?

Answer 1

I'm guessing queryObjekt.get in getObjektData is asynchronous whereas getData expects getObjectData to be immediate.

If you're having trouble with linking up asynchronous events and their result data I'd recommend you to look at the concept of promises. Look for Promises/A or Deferreds. With promises you don't have to pass callbacks all the time, instead you have an intermediate promise object that will eventually have the value. You add the callback to the promise, not the function producing the promise.