Angular error "Cannot read property 'firstName' of undefined"

Question

Hi i am working on a search service to look for usernames in a elasticsearch database but i got the following error when i want to display the f.e. firstName of the user: Cannot read property 'firstName' of undefined.

I am working with Angular and Elasticsearch

service:

export class SearchService {

  getElastic = 'http://34.62.28.281:9200/users/_doc/_search?q=';
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('TimelineService');
  }
  /** GET elasticsearch result */
  getElasticResult( text: string ): Observable<User> {
    this.http.get<User>(this.getElastic + text).subscribe(res => console.log(res));
    return  this.http.get<User>(this.getElastic + text, {responseType: 'json'});

  }

EDIT: The new HTML form:

<form [formGroup]="angForm2" *ngIf="user != null" (ngSubmit)="getUser()" class="form-inline my-5 my-lg-0">
  <input id="searchText" name="searchText" class="form-control" type="string" placeholder="Search for user" aria-label="Post"
         formControlName="searchText" required>
  <p>{{user?.firstName}}</p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

the new component:

export class SearchServiceComponent implements OnInit {
  user: User;
  angForm2 = this.fb.group({
    searchText: ['', Validators.required]
  });

  ngOnInit() {
    this.getUser();
    this.getObject();
  }

  constructor(private searchservice: SearchService, private fb: FormBuilder) { }

  getUser() {
    const userName = this.angForm2.value.searchText;
    console.log(this.angForm2.value, userName);
    this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user));
  }
  getObject() {
    return this.user;
  }
}

Output of user and this.user:

User interface:

export interface User {
  $oid: string;
  firstName: string;
  lastName: string;
  username: string;
  password: string;
  follows: User[];
}

Sajeetharan · Accepted Answer · 2020-05-24 19:01:30Z

1

I guess getObject() is getting called when you load the form, by the time user is undefined so you are getting that error. why dont you just use user?.firstName since you already have the variable defined ?

  <p>{{user?.firstName}}</p>

answered May 24, 2020 at 19:01

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

SkurSkurrrr Over a year ago

thanks for ur reply, i did change everthing u guys suggested, there is no error anymore but the {{user?.firstname}} is not showing up :/

Venkatesh K · Accepted Answer · 2020-05-25 08:29:23Z

0

In your html you need to do something like this

<p>{{usersFirstName}}</p>

In your ts code, once you get the response from the server set this usersFirstName.

usersFirstName : string;
getUser() {
    const userName = this.angForm2.value.searchText;
    console.log(this.angForm2.value, userName);
    this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user)
this.usersFirstName = user.name;
);
  }

answered May 25, 2020 at 8:29

Venkatesh K

1531 gold badge1 silver badge11 bronze badges

1 Comment

SkurSkurrrr Over a year ago

thanks for ur reply, i did that but still empty

pbmahadik · Accepted Answer · 2020-05-25 14:24:46Z

0

1.SearchServiceComponent should implement OnInit class and implement its ngOnInit method 2. Call both the methods inside ngOnInit method sequentially 3. Check if this.user is not equal to null or undefined and handle it using ngIf condition Answered by Sajitharan

Example for OnInit TS

    @Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnInit {
  ngOnInit() {
    this.getUser();
    this.getObject()
  }
getUser() {
    const userName = this.angForm2.value.searchText;
    console.log(this.angForm2.value, userName);
    this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user.hits.hits[0]._source));
  }
  getObject(){}
}

edited May 25, 2020 at 14:24

answered May 24, 2020 at 19:18

pbmahadik

2502 silver badges6 bronze badges

20 Comments

SkurSkurrrr Over a year ago

thanks for the reply, i did change the component and the html form. I edited my post with the new code. I don't get the error anymore but there is no output either. the {{user?.firstname}} is not showing up

pbmahadik Over a year ago

You haven't called getUser and getObject inside ngOnInit. Please try it and let me know

SkurSkurrrr Over a year ago

i did called them but forgot to post the new code ^^ and yeah same thing, not showing up in the

pbmahadik Over a year ago

Can you please console.log in below line this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user)); as this.searchservice.getElasticResult(userName).subscribe(user => { console.log(user); console.log(this.user); } )

SkurSkurrrr Over a year ago

okay i did that and the console prints all the user data from the elasticsearch database, but still nothing on the user?.firstName

|

Collectives™ on Stack Overflow

Angular error "Cannot read property 'firstName' of undefined"

3 Answers 3

1 Comment

1 Comment

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related