Angular Error: Trying to access a property on an undefined variable

I'm currently having an issue with assigning data from an API to my Angular component file. Whenever I try to assign the data to my object variable, I receive an error stating: "cannot set property of undefined." Below is the relevant code snippet:

Class : UserDetails as

export class UserDetails {
    DOB?: string;
    Gender?: string;
    CellPhone?: string;
}

Component.ts :

export class PerComponent implements OnInit {

  public userProfileData: UserDetails;
  constructor( private commonService : CommonService) { 
    
    
  }
  ngOnInit(): void {
    this.loadData();
  }

  loadData() {
    let profileDetailParam = {ProcedureName: 'myprocname', Parameters: ['myparam']};
    this.commonService.GetDataFromStoredProcedure(profileDetailParam)
      .subscribe((data) => {
        let parseString = require('xml2js').parseString;
        let jsonData: UserDetails[];
        parseString(data, function (err, result) {
          if (result.NewDataSet != null)
            jsonData = result.NewDataSet.SPGetDetails[0];
          this.userProfileData = jsonData  ;
          console.log(this.userProfileData);
        });
      });
  }
}

The jsondata variable contains the expected data in JSON format.

Upon execution, I encounter the following error: core.js:4197 ERROR TypeError: Cannot set property 'userProfileData' of undefined

Although I understand that I need to initialize the userProfileDetails variable, I have tried doing so in both the constructor and ngOnInit methods without success.

Answer №1

The modification of the reference for "this" object has been made within a function

parseString(data, function (err, result) {

To access the "this" object from the outer scope, you can utilize an arrow function:

parseString(data, (err, result) => {
          if (result.NewDataSet != null)
            jsonData = result.NewDataSet.SPGetDetails[0];
          outerContext.userProfileData = jsonData  ;//////// use here
          console.log(outerContext.userProfileData);
        });

Further information can be found at: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?

Answer №2

The function "parseString" exists independently of "this", causing confusion when trying to assign values within a specific context.

To resolve this issue, create parseString as a standalone function within the component and invoke it using "this.parseString".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launching a Node.js application on a Kubernetes cluster

Currently, I have a local Angular 6 application that I run using "npm start." My next goal is to deploy this application in Kubernetes. However, I'm unsure about how to dockerize an Angular 6 based application and run it in Kubernetes. Any assistance ...

Displaying a collection of objects in HTML by iterating through an array

As someone new to coding, I am eager to tackle the following challenge: I have designed 3 distinct classes. The primary class is the Place class, followed by a restaurant class and an events class. Both the restaurant class and events class inherit core p ...

sending a collection of image data arrays wrapped in FormField objects from Angular to Express

I am facing a challenge while trying to upload two FormField objects along with form data to express. I am having trouble using the multer library in express to extract this data from the request. While I can access the form data, the FormField objects re ...

Ways to categorize items retrieved from an HTTP request to the backend in Angular

When making a call to the backend using this http request: this.StudentEnrollment.getRecordsById(list.value.split(/[\r\n]+/)).subscribe(values => { this.studentObject = values; }); The studentObject is structured as shown below: { recor ...

The program encountered an error with code TS2339, indicating that the property "name" cannot be found on the type "never"

app.component.html I'm attempting to display the response data from my Firebase project using *ngFor. <div class="row"> <div class="col-md-3"> <h4 class="text-warning">All Employee Da ...

Organizing Telephone Number Entries in Angular

In my search for a way to format a phone number input field in Angularjs, I have come across many solutions, but none specifically for Angular 7. What I am looking to achieve is for the user to enter the textfield like so: 123456789 and have the textfi ...

Issue with my TypeScript modules TS2307: Module not found

For my latest project, I decided to use the aurelia-typescript-skeleton as the foundation. To enhance it, I created a new file called hello.ts in the src folder. export class Hello { sayHello(name:string) : string { return 'Hello ' + name; ...

Are you interested in creating dynamic tables/models with Sequelize?

Currently, I am exploring a theoretical question before diving into the implementation phase. The scenario is as follows: In my application, users have the ability to upload structured data such as Excel, CSV files, and more. Based on specific requirement ...

observe the file currently residing on the server

Is there a way to display a server-based file within an HTML page using Angular 8.0.0? I attempted to use ngx-file-viewer, but encountered the error "Property 'wheelDelta' does not exist on type 'WheelEvent'". To address this issue, I ...

The data remains undefined even after being initialized in the constructor

My goal is to extract queryParams from a URL and leverage that information to resolve data in the following manner: data = { searchValue: null || undefined }; constructor(private http: HttpClient, private route: ActivatedRoute) { route.queryParams.su ...

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

What could be causing the DOM not to update after updating the data set in Angular 2?

Currently, I am facing an issue in Angular 2 where I call a function of a child component from the parent. The child function updates my data set which initially loads the HTML. However, when I call the function again while on the same HTML, it displays in ...

Issue: [ts] Unable to locate the term 'React'

Due to specific requirements, I have made some customizations to the Ionic component: range. I changed the class name of the component from Range to CustomRange (with selector: custom-range): https://github.com/ionic-team/ionic/blob/master/core/src/compon ...

The width of table cells expands even when using the box-sizing property set to border-box

Whenever I click the View button, I want to apply padding to the cells in my table. However, this action also increases the width of the cell. Despite researching various solutions like those found in this question, this one, and this post, I still encount ...

Is it necessary for me to cancel subscriptions in my unit tests?

In the scenario where I have a test like the one provided below: it('should return some observable', async(() => { mockBackend.connections.subscribe((mockConnection: MockConnection) => { const responseOptions = new ResponseOptions({ ...

Displaying a component upon clicking a button in Angular 9

Within the navbar, there is a "+" button that triggers the display of the component. <app-navbar></app-navbar> Upon clicking the button, the <app-stepper></app-stepper> component should be shown. <app-navbar></app-navba ...

Tips for utilizing the 'crypto' module within Angular2?

After running the command for module installation: npm install --save crypto I attempted to import it into my component like this: import { createHmac } from "crypto"; However, I encountered the following error: ERROR in -------------- (4,28): Canno ...

Troubleshooting Angular 2 routing: when routerLink is empty, it fails to function

As I configure my routing, I encountered a problem. At the moment, these are my 2 routes: const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductComponent} ]; Is it not allow ...

To enable iteration of iterators when trying to spread, utilize the TypeScript compiler option '--downlevelIteration'

I have a function that accepts an argument of either an object or an array. const handleScenarioChange = (scenario: Scenario | Scenario[]) => { if (isArray(scenario)) { const scenarios = [...state.selectedScenarios, ...scenario]; const unique ...

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

When a selector changes its value, I want to trigger an action. To achieve this, I passed the selector with a subscription instead of passing an observable. selectedSchedulingsOnPopup$ = this.store.pipe(select(selectSchedulingsByBranch)); this.store.disp ...