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.

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

    });
};

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/39119658/javascript-variable-is-an-array-of-objects-but-cant-access-the-elements