Angular 2 - TypeError: Cannot set property 'userId' of undefined

Question

I created a model and in a method when I want to give values the the model's properties, I get this error: TypeError: Cannot set property 'userId' of undefined

Here is my Model:

export class ApplicationUser {
    constructor(
        public id: string,
        public userId: string
    ) { }

}

Here is the method:

public alreadyExists(sub: string) {
    let applicationUser: ApplicationUser;

    this.applicationUserService.getApplicationUser(sub)
                                    .subscribe(
                                        appUser => applicationUser = appUser,
                                        error => this.errorMessage = <any>error
                                    );

    if (applicationUser == null) {
        applicationUser.userId = sub;

        this.applicationUserService.postApplicationUser(applicationUser)
                                       .subscribe(
                                           error => this.errorMessage = <any>error
                                       );
    }

    localStorage.setItem('userId', sub);
}

The error appears after this line: applicationUser.userId = sub;

What do I have to change/add to don't get this error message?

Thank You!

if (applicationUser == null) { applicationUser.userId = sub; seems suspicious — eko
– eko, Commented May 31, 2017 at 11:39
if applicationUser == null is true how would it contain a userId ? For starters i think this should be if (applicationUser !== null) — Nugu
– Nugu, Commented May 31, 2017 at 11:46

Hampus · Accepted Answer · 2017-05-31 12:22:29Z

4

There are at least three issues with your code.

First you disregard the asynchronous nature of your code, second you try to write to a property of an object that is null and third you pass the error callback as the success callback to your post.

I don't know what 'sub' is but you seem to use it as userId so I do as well. Here is a replacement suggestion that does what you are trying to do. Instead of chaining the logic in promises I use the async/await construct.

public async alreadyExists(sub: string) {
  try {
    let applicationUser: ApplicationUser = 
      await this.applicationUserService.getApplicationUser(sub).toPromise();

    if (applicationUser === null) {
      applicationUser = new ApplicationUser(sub);

      await this.applicationUserService.postApplicationUser(applicationUser)
       .toPromise();
    }
    localStorage.setItem('userId', sub);
  } catch (error) {
    this.errorMessage = error;
  }
}

I hope this helps

edited May 31, 2017 at 12:22

answered May 31, 2017 at 11:55

Hampus

2,8391 gold badge27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eko Over a year ago

I think localStorage should be set inside in one of the async callbacks (OPs intention), +1

Hampus Over a year ago

Perhaps you are right but I'll leave it as OP has it as it is not strictly broken code.

Amit Chigadani · Accepted Answer · 2017-05-31 11:45:36Z

2

let applicationUser: ApplicationUser;

The above line will not create the actual object instance here, its just a reference. Error says applicationUser is undefined

You can try doing

let applicationUser: ApplicationUser = new ApplicationUser ('', '');

Alternatively (not tested)

let applicationUser: ApplicationUser
 applicationUser = Object.create(ApplicationUser.prototype);
 this.constructor.apply(applicationUser, ['', '']);

answered May 31, 2017 at 11:45

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

2 Comments

eko Over a year ago

@GSeriousB I don't think it will work the way you intended it to be, Hampus's answer states all your misthoughts

Hampus Over a year ago

I'll second what @echonax said. Although it will no longer have runtime crashes it will not work as you intend.

Collectives™ on Stack Overflow

Angular 2 - TypeError: Cannot set property 'userId' of undefined

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related