Javascript OOP issue with variable scope

Question

I'm using an alert() for testing, but I can't get my object to alert the right value of my variables after they have been changed inside of my for loop. I want to store the values in an object using a constructor but only the empty values I set at the beginning are being stored.

//declare the variables I'm going to use inside of my database query and for loop. 

$(function(){
    var uID =  JSON.parse(localStorage.getItem( 'uID' ));
    var hood = ' ';
    var gender = ' ';
    var birthday = ' ';
    var zip = ' ';
    Parse.initialize("ivHLAO7z9ml1bBglUN*******yCgKM2x","gNeGt04lU7xce*****BsIBSCVj");

$("#mainDiv").on('click', '.interested', function(){
    //on click, use "uID" variable to query the parse database to get birthday, gender, neighborhood, and zip
    var query = new Parse.Query(Parse.User);
    query.equalTo("uID",uID);
    query.find({
        success: function(results) {
            for(i = 0; i < results.length; i++){
                //this is where the variable values declared at the beginning are supposed to be changed to the results of the query 
                hood = results[i].get("neighborhood");
                gender = results[i].get("gender");
                birthday = results[i].get("birthday");
                zip = results[i].get("zipCode");
            }
        }//closes success
    })//closes find 

    //my object constructor 

    function interested(neighborhood,sex, bDay, zipCode) {
        this.hood = neighborhood;
        this.gender = sex;
        this.birthday = bDay;
        this.zip = zipCode; 
    }
    var intrstd = new interested(hood, gender, birthday,zip);

    alert(intrstd.hood); 
    alert(intrstd.gender); 
    alert(intrstd.birthday); 
    alert(intrstd.zip); 
});//closes on

Try adding a breakpoint inside the success function and see when it's hit vs when the alert is fired. — Colin DeClue
– Colin DeClue, Commented May 3, 2013 at 20:00

Tomas Kirda · Accepted Answer · 2013-05-03 19:52:58Z

If you query is asynchronous, then object is constructed before those variables change. Move your alert into correct scope:

  //declare the variables I'm going to use inside of my database query and for loop. 
$(function () {
    var uID = JSON.parse(localStorage.getItem('uID'));
    var hood = ' ';
    var gender = ' ';
    var birthday = ' ';
    var zip = ' ';
    Parse.initialize("ivHLAO7z9ml1bBglUN*******yCgKM2x", "gNeGt04lU7xce*****BsIBSCVj");

    $("#mainDiv").on('click', '.interested', function () {

        //on click, use "uID" variable to query the parse database to get birthday, gender, neighborhood, and zip

        var query = new Parse.Query(Parse.User);
        query.equalTo("uID", uID);

        //my object constructor 
        function interested(neighborhood, sex, bDay, zipCode) {
            this.hood = neighborhood;
            this.gender = sex;
            this.birthday = bDay;
            this.zip = zipCode;
        }

        query.find({
            success: function (results) {

                for (i = 0; i < results.length; i++) {

                    //this is where the variable values declared at the beginning are supposed to be changed to the results of the query 

                    hood = results[i].get("neighborhood");
                    gender = results[i].get("gender");
                    birthday = results[i].get("birthday");
                    zip = results[i].get("zipCode");
                }

                var intrstd = new interested(hood, gender, birthday, zip);

                alert(intrstd.hood);
                alert(intrstd.gender);
                alert(intrstd.birthday);
                alert(intrstd.zip);

            } //closes success
        }) //closes find 

    }); //closes on

});

Collectives™ on Stack Overflow

Javascript OOP issue with variable scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related