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


#1

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?


#2

I solved it using:

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

Thanks to charlietfl at StackOverflow: http://stackoverflow.com/questions/31811848/ionic-why-is-my-localstorage-based-object-array-undefined-on-device