TypeScript Cannot read property of undefined - Angular 7

Question

i have this email model:

export class Email{
    to: Array<
        {
            email: string
            name: string
        }
    >
    from: {
        email: string
        name: string
    }
    cc: Array<
        {
            email: string
            name: string
        }
    >
    bcc: Array<
        {
            email: string
            name: string
        }
    >
    subject: string
    body: string
    type: string
}

Then I import the email model and declare it in the class like this:

import { Email } from '@/models/email';

export class BuilderJobComponent implements OnInit {
    emailJobData: Email

Later on, inside a class method I try to set a value but I get undefined. What am I not understanding about this?

Cannot read property 'from' of undefined

this.emailJobData.from.email = email
this.emailJobData.from.name  = name

// set the To address
if( Recipient ){
    this.emailJobData.to.push({ email: Recipient, name: '' })
}

TotallyNewb · Accepted Answer · 2021-03-23 17:20:34Z

5

You declared variable emailJobData, but did not assign any value to it. Hence, it's value is undefined. And undefined doesn't have any properties.

The type after colon only defines the type that can be assigned to the variable, but does not assign any value.

In your code, replace

emailJobData: Email;

with

emailJobData: Email = new Email();

And you should be good.

EDIT: To expand on fixing the issue, it's a good idea to have a constructor in your class that will initialize the values / objects in your class to the expected values. Of course, this depends on the business logic - sometimes you would expect undefined values instead of empty array / empty object, etc, so update accordingly - below is just an example.

export class AddressWithDisplayValue {
    email: string;
    name: string;
}

export class Email{
    from: AddressWithDisplayValue;
    to: AddressWithDisplayValue[];
    cc: AddressWithDisplayValue[];
    bcc: AddressWithDisplayValue[];
    subject: string;
    body: string;
    type: string;
    
    constructor() {
        this.from = new AddressWithDisplayValue();
        this.to = [];
        this.cc = [];
        this.bcc = [];
    }
}

Then, after it was initialized with emailJobData = new Email() you will be able to set those properties, e.g.

this.emailJobData.from.email = email;

edited Mar 23, 2021 at 17:20

answered Mar 23, 2021 at 16:59

TotallyNewb

4,8801 gold badge16 silver badges22 bronze badges

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

3 Comments

Nate Beers Over a year ago

You are correct as that did fix the initial problem, but then I get, Cannot set 'email' of undefined, so from is now undefined. Is there any way around that, without explicitly setting from, like this: emailJobData.from = { name: '', email: '' } before i set the values?

TotallyNewb Over a year ago

I've edited the answer to cover that. You'll probably want to read up on how both JavaScript and TypeScript (which is compiled to JavaScript) work - there are some gotchas which might seem counter intuitive :)

Nate Beers Over a year ago

Ahh, I see exactly what you mean now. I appreciate the answer :)

Collectives™ on Stack Overflow

TypeScript Cannot read property of undefined - Angular 7

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related