Ionic: Why is my $localStorage based object array undefined on device?

Question

I have a $localStorage based object array in a service:

.service('storedService', function($localStorage){

this.$storage = $localStorage;

this.$storage.storedItems;

this.addToList = function(item){

this.$storage.storedItems.push(item);

};

})

And the object array is used in a controller:

.controller('storedController', function($scope, $ionicPopup, $http,     $localStorage, itemListService, storedService) {

$scope.storedItems = storedService.$storage.storedItems;

$scope.showPopup = function() {

var i = 0;
//Pictures array stores 10 hits with URL of images
$scope.pictures = [];
//newitem is the new object pushed to items array
$scope.newitem = {}


$scope.getPic = function(name) {

    $http.get('https://www.googleapis.com/customsearch/v1?key=AIzaSyDKzJO_2-a82Jrn0sA2oSnDgHORcJegCAA&cx=011061616694035020478:dvpxju__yje&searchType=image&lr=lang_no&q=' + name).then(function(resp) {
        console.log('Success', resp.data.items);
        $scope.pictures = resp.data.items;
        $scope.newitem.pic = resp.data.items[0].image.thumbnailLink;
    })

    $scope.changePic = function() {

        if (i == 10) {

            i = 0;

        } else {
            i++;
        }
        $scope.newitem.pic = $scope.pictures[i].image.thumbnailLink;

    }

}

var myPopup = $ionicPopup.show({
    template: '<form ng-submit="getPic(newitem.name)"><input type="text" placeholder="Item name" ng-model="newitem.name" ng-blur="getPic(newitem.name)"></br><img alt="Press me!" src="{{newitem.pic}}" style="display:block;width:100px;height:100px;margin-left:auto;margin-right:auto;" ng-click="changePic()"></form>',
    title: 'Add new item to list',
    subTitle: 'Tip:Tap the image to change it',
    scope: $scope,
    buttons: [{
        text: 'Cancel'
    }, {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
            storedService.addToList($scope.newitem);
        }
    }]
});
}

$scope.data = {

showDelete: false

};

$scope.moveToItems = function(item){

itemListService.addToList(item);

};


})

This takes an object and stores it in the object array. It all works good in the browser, but in Ionic View and on device it does not work. It shows up as undefined. Why is it not undefined in the browser? What am I doing wrong?

What is undefined? Please be more specific. Where do you set storedItems as array if it doesn't already exist in storage? — charlietfl
– charlietfl, Commented Aug 4, 2015 at 14:32
@charlietfl The object array. $storage.storedItems. If I do a $storage.storedItems = [] in the service I do not get the undefined problem, but my local storage is reset when the service is loaded and is basically made useless. — Praise
– Praise, Commented Aug 4, 2015 at 17:21
right...but you need to check if it is defined first, if not make it empty array. You can't push into undefined — charlietfl
– charlietfl, Commented Aug 4, 2015 at 17:22
this in a service is the service object that is injected into other components... nothing wrong there — charlietfl
– charlietfl, Commented Aug 4, 2015 at 17:24
@charlietfl But when I define it, either in the controller or in the service, it ends up resetting the local storage when I refresh and reuse the controller. How do I prevent that? — Praise
– Praise, Commented Aug 4, 2015 at 18:13

charlietfl · Accepted Answer · 2015-08-04 18:22:59Z

2

your problem is that if there is nothing currently stored in localStorage the storedItems is not an array and is undefined

When service initializes and you assign $storage, check if storedItems is defined and if not assign an empty array to it

this.$storage = $localStorage;
if(!this.$storage.storedItems){
   this.$storage.storedItems =[];
}

answered Aug 4, 2015 at 18:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praise Over a year ago

Off course. That makes sense. It works on iOS Emulator and when I build it on device. But for some reason it does not work when I use Ionic View. Testet on both iPad and iPhone. Do you have any theories on why?

harksin · Accepted Answer · 2015-08-04 15:16:23Z

0

maybe devices are more slow than your browser. try wrap your code in $ionicPlatform.ready(function () { //**code*/})

answered Aug 4, 2015 at 15:16

harksin

2352 silver badges11 bronze badges

Collectives™ on Stack Overflow

Ionic: Why is my $localStorage based object array undefined on device?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related