CODEWITHSUNDEEP
angulartypescript
Chris Rutherford
Chris Rutherford

Reputation: 1672

Angular.io property with null value throwing undefined error

Working with Angular, and trying to push data to a form where some of the data is null. When attempting to map the data model, I'm having issues where exceptions are thrown when the incoming data property is null.

Here is my input data class:

export class Inputdata {
  sweepId: string;
  IndivId: string;
  FirstName: string;
  PrefName: string;
  LastName: string;
  Suffix: string;
  Language: string;
  Addr1: string;
  Addr2: string;
  Addr3: string;
  City: string;
  State: string;
  Zip: string;
  CountryCode: string;
  Country: string;
  PrimaryPhoneType: string;
  PrimaryPhone: string;
  PrimaryEmailType: string;
  PrimaryEmail: string;
  Positioncode: string;
  TrackingNumber: string;
  PositionTitle: string;
  AreaServed: string;
  DistrictServed: string;
  TrackingID: string;
}

The data moves across from the database to the angular service just fine and gets to the component as an object called data which is an array of type Inputdata. In the subscribe call, I'm assigning data across from Inputdata to the Person data type like this:

 this.people.getPersonById(this.Id).subscribe(data=>{
     this.inputs = data;
     console.log(this.inputs[0]);
     this.person.email.priEmailType = this.inputs[0].PrimaryEmailType || 'Not Provided';
     this.person.email.emailAddress = this.inputs[0].PrimaryEmail;
     this.person.phone.priPhoneType = this.inputs[0].PrimaryPhoneType;
     this.person.phone.Phone = this.inputs[0].PrimaryPhone;
     this.person.name.firstName = this.inputs[0].FirstName;
     this.person.name.prefName = this.inputs[0].PrefName;
     this.person.name.lastName = this.inputs[0].LastName;
     this.person.name.suffix = this.inputs[0].Suffix;
     this.person.address.addr1 = this.inputs[0].Addr1;
     this.person.address.addr2 = this.inputs[0].Addr2;
     this.person.address.addr3 = this.inputs[0].Addr3;
     this.person.address.city = this.inputs[0].City;
     this.person.address.state = this.inputs[0].State;
     this.person.address.zip = this.inputs[0].Zip;
     this.person.address.country = this.inputs[0].Country;
     this.person.address.countryCode = this.inputs[0].CountryCode;
     if(this.inputs.length >1){
       for(var i=0;i<this.inputs.length;i++){
        this.position.positionCode = this.inputs[i].Positioncode;
        this.position.positionTitle = this.inputs[i].PositionTitle;
        this.person.positions.push(this.position);
       }
     }
}

and here is a sample of the data as it comes from the DB.

[ { SweepID: 1,
    IndivId: 404873,
    FirstName: 'Paul',
    PrefName: null,
    LastName: 'Person',
    Suffix: null,
    Language: 'EN',
    Addr1: '13120 Skidaway Place',
    Addr2: null,
    Addr3: null,
    City: 'Tarry Town',
    State: 'LOUISIANA           ',
    Zip: '70737',
    CountryCode: 'US',
    Country: 'United States',
    PrimaryPhoneType: 'Home',
    PrimaryPhone: '(225)572-2268',
    PrimaryEmailType: null,
    PrimaryEmail: null,
    PositionCode: 'GM',
    TrackingNumber: '000131960',
    PositionTitle: 'General Manager',
    AreaServed: '027',
    DistrictServed: null,
    TrackingID: null },
  { SweepID: 82257,
    IndivId: 404873,
    FirstName: 'Paul',
    PrefName: null,
    LastName: 'Person',
    Suffix: null,
    Language: 'EN',
    Addr1: '13120 Skidaway Place',
    Addr2: null,
    Addr3: null,
    City: 'Tarry Town',
    State: 'LOUISIANA',
    Zip: '11111',
    CountryCode: 'US',
    Country: 'United States',
    PrimaryPhoneType: 'Home',
    PrimaryPhone: '(555)555-5555',
    PrimaryEmailType: null,
    PrimaryEmail: null,
    PositionCode: 'PRCONT',
    TrackingNumber: '000131960',
    PositionTitle: 'Primary Contact',
    AreaServed: null,
    DistrictServed: null,
    TrackingID: null } ]

How can I work around this to where it will accept Null Values?

Upvotes: 0

Views: 1436

Answers (2)

AVJT82
AVJT82

Reputation: 73357

I'm going out on a limb here...

I suspect your actual problem is probably laying with person, it is that which is throwing your error. The response having null values should not throw such an error.

So when you have not initialized it properly it's trying to read property paths that do not exist, for example:

person.email.priEmailType

where person might be an empty object, but email is undefined, so when it's trying to read priEmailType, it can't since email is undefined.

The quick fix is to initialize the object as:

person = {email:{}, phone:{}, name:{}, address:{}}

So for example now we can try and read priEmailType since email is no longer undefined

You might want to make some helper method or something to at least map the values to your person, especially if you want to use it elsewhere.

Upvotes: 1

Yngve B-Nilsen
Yngve B-Nilsen

Reputation: 9676

You're on to it here:

this.person.email.priEmailType = this.inputs[0].PrimaryEmailType || 'Not Provided';

just do the same for the other fields as well:

this.person.name.lastName = this.inputs[0].LastName || '';

if LastName is null/undefined it will default to an empty string

Upvotes: 0

Related Questions