The property of userNm is undefined and cannot be set

Question

The property of userNm is undefined and cannot be set

When attempting to retrieve a value from the database and store it in a variable, an error is encountered:

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'userNm' of undefined
TypeError: Cannot set property 'userNm' of undefined

Below is the code snippet in TypeScript (ts):

userNm: string ='';

ngOnInit(){

   console.log("trying...");
   firebase.firestore().collection(`Students`)
   .where("authId", "==", this.userId) 
   .get()
   .then(querySnapshot => {
     querySnapshot.forEach(function(doc) {
         console.log(doc.data().Name); // OK RESULT IN CONSOLE.LOG, NAME IS String in db.
         this.userNm = doc.data().Name;  // ERROR HERE
         console.log(this.userNm)
         console.log(doc.id, " ===> ", doc.data());
     });
   });

Screenshot showing the error and database records:

https://i.sstatic.net/aqYWD.png

https://i.sstatic.net/MFRUR.png

javascript angular typescript ionic-framework google-cloud-firestore

Answer 1

Answer №1

This keyword within a JavaScript function() actually points to the specific function's scope. To access member variables, it is recommended to use the arrow function syntax. You may want to consider implementing the following approach:

firebase.firestore().collection(`Students`)
  .where("authId", "==", this.userId) 
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach((doc) => {   // <-- Make use of arrow function at this point
      console.log(doc.data().Name);
      this.userNm = doc.data().Name;
      console.log(this.userNm)
      console.log(doc.id, " ===> ", doc.data());
    });
  });

Answer 2

This keyword within a JavaScript function() actually points to the specific function's scope. To access member variables, it is recommended to use the arrow function syntax. You may want to consider implementing the following approach:

firebase.firestore().collection(`Students`)
  .where("authId", "==", this.userId) 
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach((doc) => {   // <-- Make use of arrow function at this point
      console.log(doc.data().Name);
      this.userNm = doc.data().Name;
      console.log(this.userNm)
      console.log(doc.id, " ===> ", doc.data());
    });
  });

Answer 3

Answer №2

querySnapshot.forEach(function(doc)

showcases the utilization of an anonymous function characterized by this. Try utilizing lambda instead. ..

querySnapshot.forEach((doc) =>{

querySnapshot.forEach((doc) =>{
         console.log(doc.data().Name); // Successfully logs the name stored as String in the database.
         this.userNm=doc.data().Name;  // An error occurs at this line
         console.log(this.userNm)
         console.log(doc.id, " ===> ", doc.data());
     });

Answer 4

querySnapshot.forEach(function(doc)

showcases the utilization of an anonymous function characterized by this. Try utilizing lambda instead. ..

querySnapshot.forEach((doc) =>{

querySnapshot.forEach((doc) =>{
         console.log(doc.data().Name); // Successfully logs the name stored as String in the database.
         this.userNm=doc.data().Name;  // An error occurs at this line
         console.log(this.userNm)
         console.log(doc.id, " ===> ", doc.data());
     });

The property of userNm is undefined and cannot be set

Answer №1

Answer №2

Similar questions

Optimizing Angular: Configuring baseHref for assets during development with SSR

Run code once the Firestore get method has completed its execution

Using a Button component as a TableCell in a material-ui Table

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Effective steps after Ajax request

Pressing the tab key while using Angular will halt any additional processes from running

Calculating the dot product of two arrays using JavaScript

Saving a boolean value and a number to Firestore in an Angular application

Encountering difficulties in populating mongoose document following a model query

An operator in rxjs that transforms an Observable of lists containing type X into an Observable of type X

Troubles with a Chrome Extension for JSON

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

Instead of using <div>, try substituting it with a different HTML page

Is there a way I can turn off the dragging functionality in my situation?

AngularJS asynchronous task

Utilizing Jquery functions within the AngularJS framework

Utilizing the JSON File in Your HTML Webpage: A Comprehensive Guide

JavaScript inquiry

Error with Cross-Origin Resource Sharing (CORS) on my website

The 'Set-Cookie' response header failed to be recognized for a subsequent HTTP request