Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

107
Views
Angular2 object cannot set property of undefined

So I have this little app in Angular2, and I'm trying to define an object. This is the main component.

export class ContactComponent  {
    person: {
    firstname: string;
    lastname: string;
}
constructor(private PeopleService: PeopleService){
}

ngOnInit(){

this.PeopleService.fetchData().subscribe(
    data=> {
        this.person.firstname=data.results[0].name.first;
        console.log(this.person.firstname);
    });
  }
}

Then in the console log I get:

Cannot set property 'firstname' of undefined

I can't figure it out. Thanks.

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

You are just defining the type of person here (the colon stands for type annotations eg:propertyName:Type) :

person: {
    firstname: string;
    lastname: string;
}

What you have done here is telling the compiler that person is an object literal with 2 string properties firstname and lastname. It defines what can be store in that property, not what it contains.

You should assign a value first, otherwise, it will be undefined

interface Person {
    firstname ? : string; // the "?" makes the property optional, 
    lastname ? : string; //  so you can start with an empty object
}
export class ContactComponent {

    person: Person = {}; // initializing with an empty object

    constructor(private PeopleService: PeopleService) {}

    ngOnInit() {

        this.PeopleService.fetchData().subscribe(
            data => {
                this.person.firstname = data.results[0].name.first;
                console.log(this.person.firstname);
            });
    }
}
about 4 years ago · Santiago Trujillo Report

0

Create a class and inherit in component. For Example see the below code

       export class Person{

            firstname: string;
            lastname: string;
        }
        export class ContactComponent  {
        person=Person[];
        constructor(private PeopleService: PeopleService){
        }

        ngOnInit(){

        this.PeopleService.fetchData().subscribe(
            data=> {
                this.person.firstname=data.results[0].name.first;
                console.log(this.person.firstname);
            });
          }
        }
about 4 years ago · Santiago Trujillo Report

0

First declare an object of person type on onInit().

person p=new person();
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!