Array adds undefined element, angular 6

Question

I have a problem with an array that is supposed to be empty, the problem is that it is not, and it has an undefined element inside so it does not allow me to query the backend correctly.

this is the component with problem and the console log:

export class AvailabilityVerifierComponent implements OnInit {

  usersAvailabilities: UserAvailability[] = [];

  users: Array<User> = [];

  @Input() 
  set userToVerify(user: User){
    console.log('users array in input');
    console.log(this.users);
    console.log('User en AvailabilityVerifierComponent');
    console.log(user);
    console.log('users componente after push ');
    console.log(this.users);
    this.users.push(user);    
    console.log('users componente before push ');
    console.log(this.users);
    this.verifyAvailabilitiesService.verify(this.users)
    .subscribe(
      response => {
        this.usersAvailabilities = response;
      },
      error => {
        console.log(error);
      }  
    );

  }

  constructor(
    private verifyAvailabilitiesService: VerifyAvailabilitiesService
  ) { }

  ngOnInit() {
  }
}

change users: Array<User> = [] in users: User[]; in the onInit -> this.users = []; and do a console.log(this.user). Is empty? — Jacopo Sciampi
– Jacopo Sciampi, Commented Nov 21, 2018 at 15:37
now is empty, cool. but angular now it shows me an error when executing the input function because it can not use the .push method in undefined. After I add a user this is solved, but before that the error is present. — kmilo93sd
– kmilo93sd, Commented Nov 21, 2018 at 15:45

Arne · Accepted Answer · 2018-11-21 15:45:25Z

4

Your console log sadly changes over time; it gets revaluated. There is no way your initial array has one undefined element in it. What happens here is that when your component is initialized, the input is called with undefined as a parameter. Thus you push "undefined" into your array. Change the this.users.push(user) into

if (user) { 
   this.users.push(user); 
}

and you should be all set; except your server will be called twice. You might just want to add:

if (!user) {
   return;
}

to the top of your userToVerify method.

answered Nov 21, 2018 at 15:45

Arne

8521 gold badge6 silver badges13 bronze badges

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

1 Comment

kmilo93sd Over a year ago

this has solved the problem correctly, thank you very much for the help.

Collectives™ on Stack Overflow

Array adds undefined element, angular 6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related