"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Question

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Being someone with a background in python/golang, I am now delving into ionic2. There seems to be an issue that I can't quite figure out due to my current level of knowledge in this stack. Perhaps I just need a way to reference the outer scope of this function. Currently, I am looping through my user collection and displaying the data on the console using the code snippet provided below:

page1.ts:81 key -KFoJ-oF-ll04zmxJZiL
page1.ts:88 data Object {email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f28196918196b2959f939b9edc919d9f">[email protected]</a>", username: "cesscd"}
page1.ts:89 user UserAllowed {email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cab9aea9b9ae8aada7aba3a6e4a9a5a7">[email protected]</a>", username: "cesscd"}

However, when trying to add a new user to the allowed user array, I encounter the following error;

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'alloweduser' of undefined
    at http://localhost:8100/build/js/app.bundle.js:98:21
    at https://cdn.firebase.com/js/client/2.4.1/firebase.js:200:356
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:275)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Kc.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:35:268)
    at Ec.h.ka (https://cdn.firebase.com/js/client/2.4.1/firebase.js:32:465)
    at fe.h.R (https://cdn.firebase.com/js/client/2.4.1/firebase.js:83:379)
    at W.forEach (https://cdn.firebase.com/js/client/2.4.1/firebase.js:200:326)
    at http://localhost:8100/build/js/app.bundle.js:88:22

Code base

export class Page1 {
    reponse:string;
    firebaseUrl:string;
    userRef:Firebase;
    alloweduser: UserAllowed[];
    constructor() {
        this.firebaseUrl = "https://fghghgf-hefghgfhat-gh.firebaseio.com/web/data/";
        this.userRef = new Firebase(this.firebaseUrl).child("users");
    }

    ngOnInit(){
        this.alloweduser=[];
        this.userRef.once("value", function(snapshot) {
            // The callback function will get called twice, once for "fred" and once for "barney"
            snapshot.forEach(function(childSnapshot) {
                // key will be "fred" the first time and "barney" the second time
                var key = childSnapshot.key();
                console.log("key",key);
                // childData will be the actual contents of the child
                var childData = childSnapshot.val();
                var user = new UserAllowed("","");
                var user = new UserAllowed(childData.username,childData.email);
                console.log("data",childData);
                console.log("user",user);
                //Why this.alloweduser get undefined inside this function?
                this.alloweduser.push(user);
            });
        });
    }
}


// TypeScript
class UserAllowed {
    email: string;
    username: string;

    constructor(username:string, email: string) {
        this.email = email;
        this.username = username;
    }
}

typescript firebase angular ionic2

Answer 1

Answer №1

When working with a callback function, the use of this may lead to unexpected results due to its different context. An effective solution is to utilize fat-arrow/rocket notation for the callback, ensuring that this retains the expected value:

    this.userRef.once("value", (snapshot) => {
        // The callback function will be triggered twice, processing "fred" and then "barney"
        snapshot.forEach((childSnapshot) => {
            // The key will correspond to "fred" first and then "barney"
            var key = childSnapshot.key();
            console.log("key", key);
            // The childData contains the child's actual data
            var childData = childSnapshot.val();
            var user = new UserAllowed("", "");
            var user = new UserAllowed(childData.username, childData.email);
            console.log("data", childData);
            console.log("user", user);
            // Despite endeavors, why does this.alloweduser become undefined within this block?
            this.alloweduser.push(user);
        });
    });

To delve deeper into understanding the implications of this, refer to How to access the correct `this` context inside a callback?

Answer 2

When working with a callback function, the use of this may lead to unexpected results due to its different context. An effective solution is to utilize fat-arrow/rocket notation for the callback, ensuring that this retains the expected value:

    this.userRef.once("value", (snapshot) => {
        // The callback function will be triggered twice, processing "fred" and then "barney"
        snapshot.forEach((childSnapshot) => {
            // The key will correspond to "fred" first and then "barney"
            var key = childSnapshot.key();
            console.log("key", key);
            // The childData contains the child's actual data
            var childData = childSnapshot.val();
            var user = new UserAllowed("", "");
            var user = new UserAllowed(childData.username, childData.email);
            console.log("data", childData);
            console.log("user", user);
            // Despite endeavors, why does this.alloweduser become undefined within this block?
            this.alloweduser.push(user);
        });
    });

To delve deeper into understanding the implications of this, refer to How to access the correct `this` context inside a callback?

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Code base

Answer №1

Similar questions

Unexpected artifacts are being introduced to the build folder by the compiler

A unique Angular decorator is created to seamlessly integrate a new component within an existing component

Error 500 on Firebase: Issue solving "firebase" in "firebase.js" not resolved

Typescript-enabled NodeJS REST client

If a generic string argument is not specified as a string literal, it will not be narrowed unless it is the first argument

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

Bringing in information from a TypeScript document

Unlocking the TypeScript UMD global type definition: A step-by-step guide

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

Capacitor - Error: Trying to access the property 'getToken' on an undefined object

Error in NodeJS when trying to run ESM: "ReferenceError: exports is not defined

Generate a unique Object URL for the video source by utilizing the binary string obtained from the backend

Discovering the array item by its ID using Angular 2 with Typescript

Priority is given to strings over numbers

Tips for injecting scripts into the head tag after an Angular component has been loaded

Looking to retrieve a single data point from [object][object]

Child component in Angular2 makes an observer call to its parent object

The date selected in the date picker does not display in the view until the calendar is opened

Unable to locate the term "module"

Getting the local path of a file from an input file in Angular 7