Ionic storage - fetching data gives me [object Object]

Question

I'm storing a JSON Array via Ionic Storage like this:

this.storage.set('data', this.data).then().catch(err => {
  this.data.splice(this.data.indexOf(Data), 1);
});

and fetching it in a function:

fetchData(){
    this.storage.get('data').then(
      (data: {value: string, usage: string, date: string, addedDate: string}[]) => {
        this.data = data != null ? data : [];
        console.log('DATA FETCHED: ' + data);
        return data;
      }
    ).catch(err => {
      console.log(err);
    });
  }

I stored 4 objects in the array, but the console.log just gives me this back:

DATA FETCHED: [object Object],[object Object],[object Object],[object Object]

What should I do to get the array displayed right? I already tried with .toString() and .slice()

relevant part in home.html:

<ion-item *ngFor="let item of items">
    <h2>{{ item.usage }}</h2>
    <p>{{ item.date | date:'dd MMM yyyy' }}</p>
    <h1 item-end ngClass="{{ item.value.charAt(0) === '-' ? 'expense' : 'income' }}">{{ item.value }} €</h1>
    <!--<h1 item-end class="income">+ 450,00 €</h1>!-->
</ion-item>

home.ts:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items: any = this.moneyService.fetchData();

  incomeval: any = IncomevalPage;
  expenseval: any = ExpensevalPage;

  constructor(public navCtrl: NavController, private moneyService: MoneyService) {}

  ionViewWillEnter(){
    this.items = this.moneyService.fetchData();
  }
}

Answer 1

I think that, in addition to what Marco said in his answer, the problem is that you're not returning anything from fetchData(). The return statement is inside the promise. Promises might take a while to get used to, but if you return the result, it will be a new promise with the new value. It might be easier to understand with an example:

var promise = Promise.resolve("first").then(val => "second");
promise.then(val => console.log("val is", val));
// Prints: "val is second"

You are setting this.data of the MoneyService but it's not accessed anywhere in the HomePage component.

What if you change fetchData to this:

fetchData(){
  return this.storage.get('data').then((data: {value: string, usage: string, date: string, addedDate: string}[]) => {
    return data != null ? data : [];
  });
}

It will now return a promise, which you will have to take care of properly in HomePage, maybe something like this (untested):

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    items: any;

    incomeval: any = IncomevalPage;
    expenseval: any = ExpensevalPage;

    constructor(public navCtrl: NavController, private moneyService: MoneyService) {
        moneyService.fetchData().then(result => this.items = result);
    }
}

It will update this.items as soon as the data is available.