CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-database
Zik
Zik

Reputation: 1576

Javascript variable is an array of objects but can't access the elements

I am using Firebase database and Javascript, and I have code that will get each question in each category. I have an object called category will contain the name, the questions, and the question count, then it will be pushed into the list of categories (questionsPerCategory). Inside the the callback function I just do console.log(questionsPerCategory). It prints the object (array) that contains the categories and questions. Now my problem is that when I do console.log(questionsPerCategory[0]) is says it's undefined, I also tried console.log(questionsPerCategory.pop()) since it's an array but it's also undefined. Why is that? Below is the code and the image of the console log. Additional note: CODE A and C are asynchronous, CODE B and D are synchronous.

enter image description here

this.getQuestionsForEachCategory = function(callback, questions, questionsPerCategory) {
    var ref = firebase.database().ref('category');
    var questionRef = firebase.database().ref('question');
    console.log('get questions for each category');

    // CODE A
    ref.once("value", function(snapshot) {

        // CODE B
        snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key;

            var childData = childSnapshot.val();

            var category = {
                category_name: childData.category_name
            };

            // CODE C               
            questionRef.orderByChild("category_name").equalTo(childData.category_name).once("value", function(questionSnapshot){
                var count = 0;
                var q = [];

                // CODE D
                questionSnapshot.forEach(function(childQuestionSnapshot) {
                    var questionObj = childQuestionSnapshot.val();
                    count++;

                    questions.push(questionObj.question);
                    q.push(questionObj.question);
                });

                category.questions = q;
                category.questionCount = count;
                questionsPerCategory.push(category);

            });

        });
        callback(questionsPerCategory); 

    });
};

Upvotes: 4

Views: 1267

Answers (2)

Ioan
Ioan

Reputation: 5187

The callback(questionsPerCategory); should happen when all async calls are finished.

Right now the questionsPerCategory is not ready when the callback is called. I would use Promise API to accomplish this.

Depending on the Promise library you are using, this can be accomplished in a different ways, e.g. by using bluebird it looks like you need map functionality.

Upvotes: 2

Joey Etamity
Joey Etamity

Reputation: 866

Try this code:

this.getQuestionsForEachCategory = function(callback, questions) {
var ref = firebase.database().ref('category');
var questionRef = firebase.database().ref('question');
console.log('get questions for each category');
var questionsPerCategory = [];
// CODE A
ref.once("value", function(snapshot) {

    // CODE B
    snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;

        var childData = childSnapshot.val();

        var category = {
            category_name: childData.category_name
        };

        // CODE C               
        questionRef.orderByChild("category_name").equalTo(childData.category_name).once("value", function(questionSnapshot){
            var count = 0;
            var q = [];

            // CODE D
            questionSnapshot.forEach(function(childQuestionSnapshot) {
                var questionObj = childQuestionSnapshot.val();
                count++;

                questions.push(questionObj.question);
                q.push(questionObj.question);
            });

            category.questions = q;
            category.questionCount = count;
            questionsPerCategory.push(category);

        });
    callback(questionsPerCategory); 
    });
});
};

Upvotes: 0

Related Questions