0

I have a component called edit-scrim and inside my component i have 2 arrays of type model "Team", i am using some methods from a service i imported into the component to assign values to the array. On my first visit to the page the arrays are being populated just fine but if i go to another page using router.navigate() and comeback to "edit-scrim" using a routerlink it loses the data for 1 of the arrays. All my functionality to assign data to array is inside ngOnInit and i have done a console.log("check") inside this method to see if it is even being called every time i visit the component and IT IS being called so i am not sure what is wrong.

If i refresh my page the data comes back, but if i visit it through a routerlink again it does not

These are my arrays in the component.ts file

teams: Team[];
myTeams: Team[] = [];

Attached is the code snippet for my ngOnInIt method, i use a routerlink to visit another page and comeback to the "edit-scrim" and data is gone.

 ngOnInit() {
 console.log("check");
 this.myinit();

 }

 myinit() {



 this.authService.getAuth().subscribe(auth => {
  if (auth) {
    this.loggedInUser = auth.email;
  } else {

  }
 });

 this.teamService.getTeams().subscribe(teams => {
  this.teams = teams;
  console.log(this.teams);
  for (var i = 0; i < this.teams.length; i++) {
    if (this.teams[i].createdBy == this.loggedInUser) {
      this.myTeams.push(this.teams[i]);
    }
  }

 });

 console.log(this.myTeams);


 this.id = this.route.snapshot.params['id'];

 //Get Team
 this.scrimService.getScrim(this.id).subscribe(scrim => {
  this.scrim = scrim;
 });


 }

console.log info after visiting the page twice

EDIT When i do this inside my init function, the first time i visit my page it console.logs the right data, if i go to another page and come back to this, it is lost. :/

    this.teamService.getTeams().subscribe(teams => {
    this.teams = teams;
    console.log(this.teams);

   // this.myTeams = this.teams.filter(function (team) { return 
   team.createdBy == this.loggedInUser; });
   this.myTeams = this.teams.filter(team => team.createdBy == 
   this.loggedInUser)
   console.log(this.myTeams);


   });

EDIT2

 this.authService.getAuth().subscribe(auth => {
      if (auth) {
        this.loggedInUser = auth.email;
        this.teamService.getTeams().subscribe(teams => {
      this.teams = teams;
      console.log(this.teams);

   //this.myTeams = this.teams.filter(function (team) { return team.createdBy == this.loggedInUser; });
    this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser)
    console.log(this.myTeams);


    });
      } else {

      }
    });

EDIT3 -> Didn't work this way :/ maybe i messed up syntax?

this.authService.getAuth().subscribe(auth => {
      if (auth) {
        this.loggedInUser = auth.email;
      }
    },
      error => { console.log(error) },
      () => {
        this.teamService.getTeams().subscribe(teams => {
          this.teams = teams;
          this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser);
          console.log(this.teams);
          console.log(this.myTeams);
        });
      });

EDIT 4 - didn't work, it is not even getting to the stage of doing console.log

this.authService.getAuth().subscribe(auth => {
      if (auth) {
        this.loggedInUser = auth.email;
      }
    },
      error => { console.log(error) },
      () => {
        this.teamService.getTeams().subscribe(teams => {
          this.teams = teams;
          this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser);
          console.log(this.teams);
          console.log(this.myTeams);
        });
      });
Sabeeh Ul Haq
  • 87
  • 2
  • 11
  • It seems that you are reinitializing the second array on every call: myTeams: Team[] = []; – OctoCode Sep 24 '17 at 22:39
  • if i do myTeams[]: Team[]; -> this gives error can't push into undefined or myTeams[] = new Array it still doesn't work. What can i do? – Sabeeh Ul Haq Sep 24 '17 at 22:56
  • You can use a filter on the original array like this: this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser). – OctoCode Sep 25 '17 at 10:51
  • I forget to mention that you need ES6 for this, if you are using ES5 you can use it like this: this.myTeams = this.teams.filter(function (team) { return team.createdBy == this.loggedInUser; } – OctoCode Sep 25 '17 at 10:57
  • Do i have to change anything in my initialization of the array? also should i do this function right after i subscribe teams into this.teams or outside that subscribe function? – Sabeeh Ul Haq Sep 25 '17 at 17:04
  • Yes, delete the initialization at the declaration part. Also, you do filtering on the array instead of for loop. – OctoCode Sep 25 '17 at 17:06
  • it says cannot read property filter of undefined, when i removed the initialization – Sabeeh Ul Haq Sep 25 '17 at 17:12
  • You need to put filter line just beneath this line: this.teams = teams; – OctoCode Sep 25 '17 at 17:16
  • can you check edit, i tried that. – Sabeeh Ul Haq Sep 25 '17 at 17:17
  • my initialization looks like this now teams: Team[]; myTeams:Team[]; P.S i use a routerLink to go to another page and come back to the page i need the data on, if that makes a difference. I first thought problem lies within the subscribe but somehow the original array retains the data. :/ – Sabeeh Ul Haq Sep 25 '17 at 17:18
  • How are you "coming back"? Is the ngOnInit fired when you return? – OctoCode Sep 25 '17 at 17:43
  • yes it is firing because i can see my console.log("check") and console.log(this.teams), and lastly console.log(this.myTeams) ->this comes back as empty array. If possible can i teamviewer with you to show you what i mean. – Sabeeh Ul Haq Sep 25 '17 at 17:47
  • I think I know whats going on. You have two async calls to services, one to auth and other to team services. If team services is resolved first then you still have "nothing" from auth service and cannot filter - that's why your other array is empty. You need to chain those two calls - first you do the auth and then team services. – OctoCode Sep 25 '17 at 17:52
  • could you show me an example of "chaining" the calls, i am extremely noob at angular/typescript – Sabeeh Ul Haq Sep 25 '17 at 17:57
  • So, you have chained it in a way :) I will post you little later more "elegant" way to do it. – OctoCode Sep 25 '17 at 18:07
  • can you check edit and see if that is fine, it is working . – Sabeeh Ul Haq Sep 25 '17 at 18:07

1 Answers1

0

Your team service call is dependant on successful completion of the auth service call, so you need to "chain" it together. The easiest way to do it is to put the second call in first subscribe's code block that runs only if the call is successfully executed: 

.subscribe(
    function(response) { //code that handles response },
    function(error) { // error handling },
    function() { // code that runs after completion }
);

So in your case you will have something like this:

myinit() {
    this.authService.getAuth().subscribe((auth) => {
        if (auth) {
            this.loggedInUser = auth.email;
        }
    },
    (error) => { console.log(error); },
    () => {
           this.teamService.getTeams().subscribe(teams => {
           this.teams = teams;
           this.myTeams = this.teams.filter(team => team.createdBy == this.loggedInUser);
    });
 });
}
OctoCode
  • 382
  • 4
  • 14