How to initialize variable to avoid 'cannot read property <variable> undefined'?

Question

I am working on an angular application. I have a method in which I am trying to assign values to the variables from the data received from API call. code

this.adminService.getConfigurations(input).subscribe(
    data => {
        this.data_Configuration = data[0];
        this.data_Configuration_e = data[1]     
        this.data_Configuration.forEach(itm => {
            itm.ApplicableDetails = []
            
            this.data_Configuration_e
                .filter(ent => ent.Id == itm.Id)
                .forEach(e => {itm.ApplicableDetails.push(e)});
                        
            itm.ApplicableLevel.FirstFl = itm.ApplicableDetails.some(e => e.Nm == 'First') ? 'Y' : 'N'             
            itm.ApplicableLevel.SecondFl = itm.ApplicableDetails.some(e => e.Nm == 'Second') ? 'Y' : 'N'
        });

My data_Configuration variable is defined from a interface

public data_Configuration : IConfiguraion[] = []

export interface IConfiguration {
  Id: string;
  Nm: string;
  ApplicableLevel?: IApplicableLevels;
  ApplicableDetails?: IDetails [];
}

export interface IApplicableLevels {
    FirstFl?: string;
    SecondFl?: string;
}

When I try to assign values to FirstFl using itm.ApplicableLevel.FirstFl = itm.ApplicableDetails.some(e => e.Nm == 'First') ? 'Y' : 'N' line I get an error cannot property FirstFl of undefined. How or where should I initialize the value of FirstFl to avoid this error?

The error doesn't mean that FirstFl is undefined, it means that itm.ApplicableLevel is undefined. You'll probably want to insert itm.ApplicableLevel = {}; before assigning to it. — user5734311
– user5734311, Commented Oct 17, 2020 at 8:46
The interface is called IPrgmConfiguration but the type definition is IConfiguraion. Which I assume is a typo while posting the question? — Barremian
– Barremian, Commented Oct 17, 2020 at 8:48
{} is an object with named properties, [] is an array with index numbered elements. — user5734311
– user5734311, Commented Oct 17, 2020 at 8:52
use itm.ApplicableLevel=itm.ApplicableLevel || {} as IApplicableLevels before assign FirstFl. When we use interface, some like {} as IConfiguration, the variable has all the properties of the interface but they are undefined — Eliseo
– Eliseo, Commented Oct 17, 2020 at 9:00

Barremian · Accepted Answer · 2020-10-17 19:04:54Z

1

Most probably it's a TS Lint error because the itm.ApplicableLevel isn't initialized yet. You could instead try to initialize the ApplicableLevel property with both it's sub-properties FirstFl and SecondFl as an object instead.

Also you could skip an additional level of iterations of the data_Configuration_e array by replacing the unnecessary filter with an if in the forEach loop.

Try the following

this.data_Configuration.forEach(itm => {
  itm.ApplicableDetails = [];
  
  this.data_Configuration_e.forEach(e => {
    if (ent.Id == itm.Id) {
      itm.ApplicableDetails.push(e);
    }
  });

  itm.ApplicableLevel = <IApplicableLevels>{
    FirstFl: (itm.ApplicableDetails.some(e => e.Nm == 'First')) ? 'Y' : 'N',
    SecondFl: (itm.ApplicableDetails.some(e => e.Nm == 'Second')) ? 'Y' : 'N'
  };
});

edited Oct 17, 2020 at 19:04

answered Oct 17, 2020 at 8:55

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

How to initialize variable to avoid 'cannot read property <variable> undefined'?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related