Data Multiplies Whenever Page Loads

Ionic Framework ionic-v3
1

Hi,

I have an issue wherein everytime I load this particular page the data is being looped again, resulting to multiple duplicates. I have a nested arrays.

Here is the code snippet:

HTML:

<div *ngFor="let item of items">

		<ion-list>

			<ion-item  class="item-divider">{{ item.valid_from | date: 'MMMM d, y' }} - {{ item.valid_to | date: 'MMMM d, y'}}</ion-item>
			<div *ngFor="let detail of item.details">

		    <ion-item  (click)="showDetails(detail.expenses_savings_id)">
		      	<h2>{{ detail.title }}</h2>
		      	<p>{{ detail.amount | number:'.2-2' }}</p>
		      	<p class="time-ago" item-end>Spent {{ detail.datetime | timeAgo }}</p>
		    </ion-item>

			</div>
	  	</ion-list>

	  	</div>

TS file:

ionViewWillEnter() {
    
    //this.getPastExpenses();
    this.getPastExpensesSavings();
}

This is the array:

image

In the code above, there are two *ngFor. Once the page loads it works fine, but once I leave and re-enter the same page the second *ngFor will trigger again, resulting into double the data printed on the list.

Ive tested this by removing one *ngFor and it works fine.

Is there something I’ve missed?

2

Hello,

I can’t see how you fill your array and how you are reentering the same page.
Maybe here your array adds entrys again.

Best regards, anna-liebt

3

Hi, I have updated my original post by including the array.

4

Hello,
maybe I understand it not correct.

But if you “reenter” your page, youre array has doubled entrys, it seems for me that the array adds data again.
So the question is how you reenter the page and how you fill your array.

For example you has a method filling your array, you leave how ever and your array is still alive, you renter your page and entrys are addeed again to your array.

So please show code of both. Console.logs helps you debugging, but it doesn’t show what you have done to get this output.

Best regards, anna-liebt