Having trouble iterating through Javascript objects

Question

I've been running into a problem with accessing data in a JS object. The code that gathers the data (from a Firebase database) is as follows:

var get_user_data = function() {
    ...
    snapshot.forEach(function(child){
        var key = child.key;
        var value = child.val();
        user_char[key] = value;
        console.log(key, value);
    });
    store_user_char(user_char);
}

var store_user_char = function(user_char) {
    char_obj = user_char;
    console.log(char_obj);
    for(var key in char_obj){
        if(char_obj.hasOwnProperty(key)){
            console.log(key);
        }
}

Which should (in theory) create JS object from the Firebase database and while it is writing the data to user_char, it will print each key:object pair into the console. Afterwards, when store_user_char() executes it should also print out each key from before.

The first console.log() outputs each key:object pair successfully as it writes into user_char. The second console.log() outputs the object successfully and I can even click and edit all the elements inside and looks like this in the Firefox console:

However the third console.log() never executes, and trying to get any data from char_obj by accessing a key like so:

char_obj['KSxpjEvkCOL6ugGkxqn']

does nothing and returns undefined . Oddly enough, clicking on the objects manually in Firefox allows me to parse each child element so I know the data is being stored somewhere.

The only thing I can think of is that the request from the database might take to long to return the data, but even then the store_user_char() function should execute after the data has been stored into user_char so I'm incredibly confused as to why my code can't seem to iterate through the object.

I feel as though I'm missing something about JS objects which is the reason for why my code can't find the data, but I've been coming up blank in trying to figure out whats going on, and how I can access the data.

Any help on the matter would be greatly appreciated!

EDIT: Full def of get_user_data is as follows:

// Global variables
var user_email;
var user_char = {};
var uid;

var get_user_data = function() {
    // Authenticate current user
    var user = firebase.auth().currentUser;

    // Get User Email and char list
    if (user != null) {
        user_email = user.email;
        uid = firebase.auth().currentUser.uid;
        var getChar = firebase.database().ref('/users/' + uid + '/chars/').orderByKey();
        getChar.on('value', function(snapshot){
            snapshot.forEach(function(child){
                var key = child.key;
                var value = child.val();
                user_char[key] = value;
            });
        });
        store_user_char(user_char);
    }
}

Answer 1

getChar.on('value', function(snapshot){
    snapshot.forEach(function(child){
        var key = child.key;
        var value = child.val();
        user_char[key] = value;
    });
});

will be called asynchronously, put function call store_user_char(user_char); inside callback of getChar and your problem will be solved. Like:

getChar.on('value', function(snapshot){
        snapshot.forEach(function(child){
            var key = child.key;
            var value = child.val();
            user_char[key] = value;
        });
       store_user_char(user_char);
    });