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:

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

Nested React Components in React Router Components

Techniques for Grouping an Array of Objects by a Specific Value Key in Angular

Troubleshooting: Issue with Firebase callable function execution

Error: Attempting to update the value of 'ordersToDisplay' before it has been initialized in a re-render of React. This results in an Uncaught ReferenceError

The Protected Routes in React Router Dom persistently redirecting

Typescript throws an error when attempting to return an array of strings or undefined from a function

Having difficulty rendering JSON data on an HTML webpage

Having trouble setting up Amazon Cognito Auth JS with an Angular 4 application and a SAML identity provider

Challenges encountered when setting a value to a custom directive via property binding

Postgres Array intersection: finding elements common to two arrays

Steps to generate a fresh array from a given array of objects in JavaScript

Conceal the React button once it has been pressed

Angular 7 router navigate encountering a matching issue

Error encountered in amCharts Serial Chart when data parsing is enabled with the setting "parseDates": true which resulted in the failure to display data

Typescript: Securing Data with the Crypto Module

Tips on displaying tooltips on multiple graphs in Highcharts using Vue 3

Internet Explorer is throwing unexpected routing errors in Angular 2

Issue with exclude not functioning in tsconfig.json for Angular Typescript deployment

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

Animating the Click Event to Change Grid Layout in React