TypeScript array methods not working

Question

I am wrestling with some serious issues. I was trying to use in my code several array methods like push, includes, filter. None of them works.
ERROR TypeError: Cannot read property 'push' of undefined

Simple use of push:

  users: User[];
  user = new User('','','','','','','','','');

  addUser(user){
    this.usersService.addUser(user)
    .subscribe(
      user => this.users.push(user),
      error => this.errMsg = <any> error);
  }

UPDATE: Accidentally commented out initialization of Users.

this.getUsers();  

if(this.users.find(this.checkLogin) === undefined){
  console.log('OK no login like this');
}else{
  console.log('Login like this exists');
}
checkLogin(element){
  return element === this.user.login;
}

getUsers(){
  this.usersService.getUsers()
  .subscribe(
    users => this.users = users,
    error => this.errMsg = <any> error);
}

Still getting error:
ERROR TypeError: Cannot read property 'find' of undefined

You posted a whole lot of irrelevant code and configuration. Read the message carefully. Make sense of it: "Cannot read property 'push' of undefined". So it tries accessing push on some object (this.users), but this object (this.users) is undefined. Something is undefined when you have never initialized it. Have you initialized this.users? No, you haven't. You have just declared it. — JB Nizet
– JB Nizet, Commented Jul 7, 2017 at 14:38
You need to initialize the variable, all you're doing in that code is declaring users and its type. — silentsod
– silentsod, Commented Jul 7, 2017 at 14:38
OK, now you need to understand asynchronism. Why doesn't getUsers() return an array of users? Why does it return an Observable instead, that forces you to subscribe, pass a callback, and finally obtain the users inside the callback? Because the service call is asynchronous. As the first A in AJAX. So, once you've called getUsers(), all you have done is telling the service: I'm interested in getting users. Please call me back when they are available. Right after that, they are not available. They will be available muuuch later, after the response has come back from the server. — JB Nizet
– JB Nizet, Commented Jul 7, 2017 at 14:54

Reactgular · Accepted Answer · 2017-07-07 14:40:15Z

4

Change:

 users: User[];

To:

  users: User[] = [];

answered Jul 7, 2017 at 14:40

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

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

3 Comments

quimak Over a year ago

Why the first one doesn't work even when i add object to array through service I don't get it. Is it asynchronus or what

silentsod Over a year ago

@quimak The first one is a type declaration; go to www.typescriptlang.org and learn some basics.

Reactgular Over a year ago

@quimak the getUser function returns immediately while the service response happens later. Therefore users isn't initialized before your if statement is execute. Try if(this.users && this.users.find(...)) but this question isn't really about Angular.

Collectives™ on Stack Overflow

TypeScript array methods not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related