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

Question

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.

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); 

    });
};

Can you set up a jsfiddle/jsbin that reproduces the minimal problem? — Libu Mathew
– Libu Mathew, Commented Aug 24, 2016 at 9:44
can you show the callback function where you put "console.log(questionsPerCategory[0])"? — Joey Etamity
– Joey Etamity, Commented Aug 24, 2016 at 9:50
This is due to asynchronous call. You jut check the below link. http://stackoverflow.com/questions/38967782/firebase-realtim‌e-data-in-not-gettin‌g-added-properly-in-‌scope-variable-angul‌arjs/3911035 — Libu Mathew
– Libu Mathew, Commented Aug 24, 2016 at 9:53
@ti2005 The code you provided there, is it using underscore.js? I searched about the _(recvCategories) and _.filter and found that it might be underscore.js — Zik
– Zik, Commented Aug 24, 2016 at 14:10

Ioan · Accepted Answer · 2016-08-24 14:59:19Z

2

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.

answered Aug 24, 2016 at 14:59

Ioan

5,1873 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zik Over a year ago

What do you mean not ready? So the callback must happen after the ref.once(..)? Anyway, I used a promise and it now works. (I use angularjs for promises) Thanks!

Joey Etamity · Accepted Answer · 2016-08-24 09:58:14Z

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); 
    });
});
};

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related