ERROR TypeError: Cannot read property 'Name' of undefined after get Json

Question

I have a problem with my application in angular2. I need to connect to api to retrieve records to my Persons [] class. I want to use the second method to get people with individual id. I do the same way as in the tutorial on the Angular site but unfortunately I still have a fault

ERROR TypeError: Cannot read property 'Name' of undefined

This is my service

getPersons(): Promise<Person[]> {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    var token = currentUser.token;

    let headers = new Headers({ 'Authorization': 'Bearer ' + token })
    let options = new RequestOptions({ headers: headers });
    return this.http.get(this.QuestionsUrl, options)
        .toPromise()
        .then(response => response.json() as Person[]);
}
getPerson(id: number): Promise<Person> {
    return this.getPersons().then(persons => persons.find(person => person.Id === id));
}

My component:

export class PersonsComponent implements OnInit {
activePerson: any = {};
model: any = {};

constructor(private personService: PersonService, private route: ActivatedRoute, private location: Location) {

}

ngOnInit(): void {
    this.route.paramMap.switchMap((params: ParamMap) => this.personService.getPerson(+params.get('Id')))
        .subscribe(selected => this.activePerson = selected);


}

}

And html:

<body>

     {{activePerson.Name}}

DeborahK · Accepted Answer · 2017-09-05 17:45:23Z

1

Try using

{{activePerson?.Name}}

With a question mark.

The issue is that the template attempts to display the value before the data is retrieved. At that point, activePerson is undefined. Hence the error message.

The "?" is called a safe navigation operator. It prevents navigating to the "dot" property (name in this example) unless the object to the left of the question mark has a value.

edited Sep 5, 2017 at 17:45

answered Sep 5, 2017 at 17:42

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

3 Comments

DeborahK Over a year ago

Are you accessing the Name property anywhere else?

Mixer94us Over a year ago

The error has disappeared but has no value. Empty box

DeborahK Over a year ago

I don't use promises like that ... so I can't help you with that part. You could add some console.log() statements in your code to narrow down where the problem may be with retrieving the data. I could point you to some similar code that uses Observables if that would help.

Eliseo · Accepted Answer · 2017-09-05 18:01:44Z

0

use

 {{activePerson |json}}

to know if you are receiving any data

answered Sep 5, 2017 at 18:01

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

2 Comments

Mixer94us Over a year ago

sorry for stupid question but how can i check that ?

Eliseo Over a year ago

I figured out is possible that you received activePerson.name (in lower case) or activePerson.Nome (in nstead of activePerson.Name)

Collectives™ on Stack Overflow

ERROR TypeError: Cannot read property 'Name' of undefined after get Json

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related