Params double value at http.get


#1

Hi all @xr0master @aaronksaunders
I’m using ionic2 beta 6.

In my app.js:

    goToPage() {
        this.menu.close();
        let nav = this.app.getComponent('nav');
        nav.setRoot(UserPage, { userId: this.userId });
    }

In my tab parent = user.js:

    export class UserPage {
      static get parameters() {
            return [[NavParams]];
      }      
              
      constructor(params){    
        this.params = params;
        this.paramsId = this.params.data;
        console.log('params at userpage', this.params);
        this.tab1Root = UserProfilePage;
        this.tab2Root = UserFriendPage;
      }
    }

In my tab parent = user.html:

    <ion-tabs>
      <ion-tab [root]="tab1Root" [rootParams]="paramsId" tabTitle="Profile" tabIcon="person"></ion-tab>
      <ion-tab [root]="tab2Root" [rootParams]="paramsId" tabTitle="Friends" tabIcon="contacts"></ion-tab>      
    </ion-tabs>

my tab child = user_profile.js:

    export class UserProfilePage {
        static get parameters() {
                return [[UserService], [NavParams]];
        }

        constructor(userService, params) {
            this.params = params;
            this.userService = userService;
            this.user = [];
            console.log('this.params at userprofile', this.params);
            this.paramsUserId = this.params.data.userId;
            console.log('this.paramsUserId at userprofile', this.paramsUserId);
            this.getUserProfile();
        }

        getUserProfile() {
            this.userService.userProfile(this.paramsUserId)
                .subscribe(data => {
                    console.log('data from user_profile', data);
                    this.user = data;
                },
                error => {
                    alert(error);
                    console.log('error from user_profile', error);
                })
        }
    }

my tab child = user_friend.js:

    export class UserFriendPage {
        static get parameters() {
            return [[UserService], [NavParams]];
        }

        constructor(userService, params) {
            this.params = params;
            this.userService = userService;
            this.user = [];
            this.friends = [];
            this.paramsUserId = this.params.data.userId;
            console.log('this.paramsUserId at userfriend', this.paramsUserId);
            console.log('this.params at userfriend', this.params);
            this.getUserProfile();
        }

        getUserProfile() {
            this.userService.userProfile(this.paramsUserId)
                .subscribe(data => {
                    console.log('data from user_friend', data);
                    this.user = data;
                    this.friends = data.friends;
                },
                error => {
                    alert(error);
                    console.log('error from user_friend', error);
                })
        }
    }

my service user_service.js:

    userProfile(data)
        {
            let headers = new Headers(this.Backend_Header);
            let options = new RequestOptions({ headers: headers });
            //let userData = JSON.stringify(data.userId);
            console.log('data from user_service', data);
            //console.log('userData', userData);
            this.userDataId = data;
            console.log('userDataId from user_service', this.userDataId);
            this.Backend_User_Properties = this.Backend_User_Properties + this.userDataId;
            return this.http.get(this.Backend_User_Properties, options)
                .map( res => res.json());          
        }

When i click goToPage() from app.js then it success go to tab parent (UserPage) and tab child (UserProfilePage).

Result from tab1 = UserProfilePage are OK.

this.params at userprofile

    NavParams {data: Object}
    data: Object
           userId: "C8FE36A2-9396-13C5-FF9C-8F8EF7F07900"
           __proto__: Object
           __proto__: Object

When i click to tab2 = UserFriendPage, the result of this.params is exactly the same with tab1 params, but I got error from user_service.js

angular2-polyfills.js:126 GET https://api.backendless.com/v1/users/C8FE36A2-9396-13C5-FF9C-8F8EF7F07900C8FE36A2-9396-13C5-FF9C-8F8EF7F07900 404 (Not Found)

From error, i see that userId value was double in http GET.
Why this can be happening ??
Any help to solve this problem??
Thanks in advance.


#2

I guess that the problem is caused by the following line in your code:

this.Backend_User_Properties = this.Backend_User_Properties + this.userDataId;

You’re updating the value on each method call adding the userDataId every time, i.e. appending it to the value which already has the previous ID.

Instead you could use a local variable which is (re)created on each method call, i.e.:

    userProfile(data)
    {
        // ...
        let url = this.Backend_User_Properties + this.userDataId;
        return this.http.get(url, options).map(res => res.json());
    }

#3

Thanks @iignatov ,

It works now…

From my code, is it a good practise to get data from backend using service every time i open UserPageProfile or another tab page ??

Should i using life cycle like ionViewWillEnter() / ionViewDidEnter() in my tab page ?
Because i really don’t understand, why or how to use or apply life cycle events ?

From docs, Life cycle events can be defined in any component type which is pushed/popped from a NavController. If i use nav.setRoot then i can’t define a life cycle events, is it right ?

Thanks in advance for any advice and suggestion.