Get from Localstorage in constructor and show on screen?

Hello, I’m usign localstorage to save some data, and when I open a new page, I want to get that data and show on screen.

I’m doing the constructor this way:

constructor(nav: NavController, popup: Popup, app: IonicApp, dao: Dao) {
	this.popup = popup;
	this.nav = nav;
	this.app = app;
	this.dao = dao;

	this.dao.getSelectedInstitution(function(data : Institution) {
		this.selectedInstitution = data;
		console.log(this.selectedInstitution.name + "LOAD SUCESSFULL");
	})
	// this.selectedInstitution = JSON.parse(window.localStorage.getItem('selectedInstitution'));
	// console.log(this.selectedInstitution + "NAMAMANANA")
}

in method this.dao.getSelectedInstitution the selectedInstitution is loaded normally, but the value is not showed on the screen…

Someone knows why?

My methods on DAO are:

getSelectedInstitution(callback) {
  return this.getFromLocalStorage('selectedInstitution', callback);
}

getFromLocalStorage(key, callback){
  return this.storage.get(key).then((value) => {
   var selectedInstitution = JSON.parse(value);
   callback(selectedInstitution);
})
}

If I use only:
window.localStorage.getItem('selectedInstitution')
in the constructor works normally…

Any help is appreciated

A few questions:

  1. Do you get any errors in console?
  2. Where do you open the database to put it inside this.storage?
  1. I got no errors in console

  2. I open in the dao constructor

    import {Platform, Storage, LocalStorage} from ‘ionic-framework/ionic’;
    import {Injectable} from ‘angular2/core’;
    import ‘rxjs/Rx’;
    import {User} from ‘…/model/user’;

    @Injectable()
    export class Dao {
    constructor() {
    this.storage = new Storage(LocalStorage);
    }

And this is working, he shows the correct value on console, but don’t show on screen.

Then you’re showing the wrong data, show your html on the page.

I don’t think so, because if i use:
this.selectedInstitution = JSON.parse(window.localStorage.getItem('selectedInstitution'));
in the constructor, he shows the data normally…

I my html I put
<h2>{{selectedInstitution.name}}</h2>

So in the next code in console shows the 'LOAD SUCESSFULL' message?:

It’s probably the this context, log this in the constructor and inside the getSelectedInstitution() callback and compare.

I made my constructor like this:

constructor(nav: NavController, popup: Popup, app: IonicApp, dao: Dao) {
	this.popup = popup;
	this.nav = nav;
	this.app = app;
	this.dao = dao;

	this.dao.getSelectedInstitution(function(data : Institution) {
		this.selectedInstitution = data;
		console.log(this.selectedInstitution.name + "LOAD SUCESSFULL");
	})
	console.log(this.selectedInstitution.name + "LOAD SUCESSFULL OUTSIDE");
}

and the method in Dao like this:

getSelectedInstitution(callback) {
return this.getFromLocalStorage('selectedInstitution', callback);
  }

getFromLocalStorage(key, callback){
return this.storage.get(key).then((value) => {
  var selectedInstitution = JSON.parse(value);
  console.log(selectedInstitution.name + "VALUE INSIDE METHOD")
  callback(selectedInstitution);
})
}

And the output in console was:

app.bundle.js:71862 LOAD SUCESSFULL OUTSIDE
app.bundle.js:71382 Instuicao AVALUE INSIDE METHOD
app.bundle.js:71860 Instuicao ALOAD SUCESSFULL

“Instuicao A” is the correct value.

he shows the message from ouside before…

It’s not about the correct value, it’s about the correct context, you could be saving that selectedInstitution elsewhere but in the page class, the this inside the callback is not the same as the this in the constructor.

I told you (my bad for the syntax i used) that log the content of this both in the constructor and in the callback and compare if they are indeed the same this.

I really don’t know what happened, now is working…