Data pulled are not shown until page reload and when resolved cannot be displayed?

Hi!

Ok I’m stuck with that for a while now, thought I could leave it for later but haven’t found my answer even when following the tutorials…

Short story: I can’t display the object datas I have pulled in

Here is the story:
1/ User arrives on log in page > log in > call to API > success returns the user’s data, logs him in and stores his data & session locally.
2/ User directed to the home page via a state.go(‘app.home’).
3/ My state app.home has a resolve to pull in the user datas from the local storage. Following the tutorial concept here. See my code below:

// Home when logged in
  .state('app.home', {
    url: "/home",
    resolve: {
      user: function(DataService) {
        return DataService.getUser()
      }
    },
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
        controller: 'HomeCtrl'
      }
    }
  })

the Service:

/*
 * Shared Data Service for the views
 ------------------------------------------------------*/
.service('DataService', function($q, $localstorage) {
    return {
        user: $localstorage.getObject('user'),
        getUser: function() {
            return this.user
        }
    }
})

Then the controller:

  /*
     * Home Controller
     ------------------------------------------------------*/
    .controller('HomeCtrl', function($scope, $state, user) {
      
      // User's info
      $scope.user = user;
     //FOR DEV PURPOSE 
    console.log(user); 
    console.log(user.username)
    })

At last but not least the html

<ion-view view-title="">
    <ion-content>
        <div class="container">
            <h1>{{user.username}}</h1> ETC......

4/ When being redirected from login, this home page displays nothing and the console logs:

> Object {}
>undefined

Meaning user is empty…
5/ I reload the page page and now the console logs:

> Object {id: 2, username: "test001", created_at: "2015-01-23 16:49:24", updated_at: "2015-01-23 19:46:43", email: "test001@test.com"…}code: ""created_at: "2015-01-23 16:49:24"email: "test001@test.com"id: 2ip: "192.168.10.1"password_temp: ""salt: ""updated_at: "2015-01-23 19:46:43"username: "test001"__proto__: Object
> test001

and in the nav-view I can see the name (good news…) but I added the {{user.username}} in the ion nav bar but this will not show the username no matter how many times I reload…

6/ When I log out (clears all the local storage and logs out) and log in with a new user, I see the previous user’s username after redirection to the home page. Once I reload I see mine appear…

What’s going on? What I am not doing correctly?
Thank you sooo much for taking the time to read & help!!! I owe anyone helping a beer!! :beers:

So, for the nav bar title not updating there have been a few issues with it. Try using ion-nav-title. See this issue:

Edit: Can you reproduce this in a codepen? I am able to see the object’s data in this codepen (but I’m not accessing local storage): http://codepen.io/anon/pen/qEjmjM

And I just realized I’ve commented on all of your posts so I’ll take that beer. :beers:

haha yes you earned that :beer: thank you so much for taking the time!
Thanks for the bug on view title. However I am not using it in the view title but on the side.

<ion-nav-buttons side="right">
        <span>{{ user.username | capitalize }}</span>
</ion-nav-buttons>

I can’t really reproduce in the code pen the issue. I don’t unsertand two things: 1/ why I need to reload the page to have the user loaded after I had a state.go(‘home’) with a resolve that should have loaded those datas
2/ why it keeps the previous’ user’s data in the view?

ps: yes I see the result of {{user.username}} being output in the codepen but whole page is being reloaded on each modification of code also

Thanks!

I might have a lead, my menu view is being loaded first as an absolute view:

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: ''
  })

  // Welcome page for guests with login button
  .state('app.welcome', {
    url: "/welcome",
    views: {
      'menuContent': {
        templateUrl: "templates/welcome.html",
        controller: "WelcomeCtrl"
      }
    }
  })

Which basically won’t update on view change after the login ! I guess I need to change it to have the welcome view (that has no menu anyways) be an independent root view and then go through the normal channel of the menu view > home etc…

I’ll try that and let you guys know! Might be relevant for someone else one day :wink:

EDIT 1: OK, so apparently it worked to solved the previous user’s showing up! However I still need to reload the page to see the user information appear (meaning the $scope.user does not get set until then)
EDIT 2: Here is what I discovered: all the states are loaded on app load. Meaning the app.home does the resolve and gets the user object but it’s empty before login. After login and on state.go(‘app.home’) it does not run the resolve to fecth the user again?? Is this normal behaviour?

put the resolve on the abstract state app. States inherit properties/variables from the parent… I think, it is hard to give a better response without a pen… if i can find a simple menu pen, I will put together a demo

I was curious, so I put together a pen, I think this shows what you are trying to do… not sure from information provided, so I guessed!

Hey!

Thanks for looking into it.
This is the codepen of the app

It does work with codepen but not through my machine (there is local storage on top etc…) .
So I digged a bit more and apparently the services gets loaded when the app opens (returns a null value for the array normal) and after login does not run again. So… I tried recoding it with a FACTORY and now it works…it pulls the datas only when I need to!

// Welcome page for guests with login button
  .state('welcome', {
    url: "/welcome",
    templateUrl: "templates/welcome.html",
    controller: "WelcomeCtrl"
  })
  
  //Start of the logged in zone of the app
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'HomeCtrl',
    resolve: {
      user: function(DataService) {
        return DataService.getUser()
      }
    }
  })

/*
 * Shared Data Service for the views
 ------------------------------------------------------*/
.factory('DataService', function($localstorage) {
    var getUser = function() {
        $localstorage.getObject('user');
    }
    return { getUser: function() { return $localstorage.getObject('user');}};
})

I am missing something between those two, I will try to dig a bit more into docs/examples… if you have a pretty simple idea on why this makes it right just let me know I’d be glad to hear that :slight_smile:

I still am not understanding your issue and why you think that using localStorage is the difference between it working and not being able to provide a sample… localStorage can work in CodePen, there are multiple examples already posted.

I don’t think the problem is the local storage, I’m just saying it is the difference we have right now.

So when I used the SERVICE class to return the user (even with defer promise) when going from the welcome state to the app.home it was not fetching the datas BUT with the FACTORY it returns the user… however the same problem of loading privous user’s data ocmes back… I’ll try to update the codepen again

EDIT: I ended up doing a $window.reload(true) instead of trying to go to a state that by passes the issue! But no clue what the issue was… I feel like the scope variable or maybe the service one was not updating properly…

hi man, im having a similar issue.
i have a favorites list, from which i add items.
when i access the view to see those favorites (without reloading or exiting my app), none of the data is shown.
but if i reload the browser, all the data is shown. do you have any clue on this?
regards!!

Hi!
Found you live solution? me to that problem, but i wouldnt use cache false, because scrollbar jump other place