Angular service duplicating data

Question

Angular service duplicating data

I am using Ionic framework and I have 2 views, one for all my stores and another for the store details. Both are reading data from a service. My problem is that when I click in one store and go back, all the stores are appending again.

Here is a plnkr with my code

Thanks!

Edit:

In the answers I saw that one solution is add the array inside my get function, this stops my duplicate data, but what if I want to read an object of my array. Now I have the array inside the get function like this: http://plnkr.co/edit/Ga8RVpwOvTnl4qkRVaWT?p=preview

javascript
angularjs
ionic-framework

Answer 1

your stores array is only instantiated once, but you were pushing into it every time you called the getStores method.

check out this plunkr: http://plnkr.co/edit/J6wnDEYDLPT5tsG1VYey?p=preview

Answer 2

Services/factories in angular are singletons, so when you have the code below, you are initializing the stores array once, per app, but every time you call get you are adding to it.

var stores = [];

return {
    get: function () {
        stores.push(

To resolve this, you should define the stores array inside the get function, like so:

return {
    get: function(){
        var stores = [];
        stores.push(...

In order to preserve your array, declare the array outside of the get function, but clear the array before pushing additional items to the array.

var stores =[]; //declared outside get function so it will persist throughout the service
return {
    get: function(){
        stores = []; //reset upon get so data won't be duplicated
        stores.push(...