I am working on a program built in angularjs. Currently, I receive JSON data from the server when online, but I am now developing an offline mode for the application.

Despite trying to tackle the issue, I am unable to identify why I cannot resolve it.

In the scenario where the program transitions to offline mode, I save the JSON information to localStorage to retrieve this JSON string.

Within service.js - webServiceCallPost function

webServiceCallPost: function(data, action) {
            console.log("data    "+JSON.stringify(data));
            console.log("action    "+JSON.stringify(action));
            var deferred = $q.defer();
            if (navigator.connection.type != "none") {
                return $.ajax({
                    type: "POST",
                    url: appConst.serviceUrl.service + action,
                    crossDomain: true,
                    dataType: "json",
                    data: data,
                    timeout: 2000000,
                    async: true,
                    success: function(response) {
                        localStorage.setItem(data + action, JSON.stringify(response));

                        deferred.resolve();
                    },


      error: function(xhr, ajaxOptions, thrownError) {
                    $ionicLoading.hide();
                    if (xhr.status == 0) {
                        window.plugins.toast.showShortBottom($translate.instant("timedOutError"));
                    } else if (xhr.status == 404) {
                        window.plugins.toast.showShortBottom($translate.instant("timedOutError"));
                    } else {
                        window.plugins.toast.showShortBottom($translate.instant("timedOutError"));
                    }
                },
                beforeSend: function() {},
                complete: function() {}
            });

        } else {
            window.plugins.toast.showShortBottom($translate.instant("checkNetWorkConnection"));
            $ionicLoading.hide();
            var response1 = JSON.parse(JSON.stringify(localStorage.getItem(data + action)));
            return $http.get('').then(function(response) {
                return response1;
            });
        }
    }

And within controller.js - Retrieving response.

Services.webServiceCallPost('', appConst.services.get_menu_card).then(function(response) {
                    $ionicLoading.hide();
                    console.log("Response:     " + JSON.stringify(response));

                    if (response[1].response.status == 1) {
                        if (response[0].data.menu.length > 0) {
                            var categoryResponse = [];
                            angular.forEach(response[0].data.menu, function(value, key) {
                                if (value.menu_image_name != '') {
                                               var extraData = {
                                                        imageUrl: appConst.serviceUrl.menu_image_url + value.menu_image_name
                                                    }
                                } 
                                else {
                                    var extraData = {
                                        imageUrl: 'img/screen.png'
                                    };
                                }
                                angular.extend(value, extraData);
                                categoryResponse.push(value);
                            });
                            $rootScope.categories = globalMethods.getDashboardGridView(categoryResponse, 2);
                        }
                        if (response[0].data.addons.length > 0) {
                            $rootScope.totalAddons = [];
                            angular.forEach(response[0].data.addons, function(value, key) {
                                var extraData = {
                                    "finalCost": value.price,
                                    "quantity": 1,
                                    imageUrl: appConst.serviceUrl.addon_image_url + value.addon_image
                                };
                                angular.extend(value, extraData);
                                $rootScope.totalAddons.push(value);


 });
                    }
                    $scope.getSiteSettings();
                }
                $rootScope.dashboardHistoryId = $ionicHistory.currentHistoryId();
            });

Console Output : When inspecting the JSON output, it appears consistent.

Online Response :

Cached Response :

Issue: TypeError: Cannot read property 'status' of undefined

Upon attempting to retrieve the response, the status property is accessed without any problem when online 1.response.status. However, in offline mode with cached response 1.response.status, the status is returning as undefined even though the data is exactly the same. Why is this happening?