Tips for saving data fetched from a $resource into localStorage?

Question

Tips for saving data fetched from a $resource into localStorage?

After utilizing my service to parse RSS with googleapis, it returns an array's Object that contains other Objects. Upon checking the chrome console, I see the following output:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
   0: Object
   1: Object
   2: Object
   3: Object

However, when trying to retrieve data in my controller using localStorage, the console only displays brackets or nothing at all:

$scope.feeds = FeedList.get();
window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

console.log('TEST : ' + window.localStorage['savedData']);
console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));

Output :

TEST : []
TEST : 
TEST :

What could be the issue here?

service.js

.factory('FeedLoader', function ($resource) {
        return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
            fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
        });
    })

.service('FeedList', function ($rootScope, FeedLoader) {
    var feeds = [];
    this.get = function() {
        var feedSources = [
            {title: 'rss1', url: 'http://www.website.com/rss/feed/rss_feed_25300'},
            {title: 'rss2', url: 'http://www.website.com/rss/feed/rss_feed_10720'},
        ];
        if (feeds.length === 0) {
            for (var i=0; i<feedSources.length; i++) {
                FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
                    var feed = data.responseData.feed;
                    console.log(feed.entries);
                    feeds.push(feed.entries);
                });
            }
        }
        return feeds;
    };
})

javascript angularjs asynchronous local-storage

Answer 1

Answer №1

The issue at hand is that FeedList.get() relies on asynchronous operations, causing $scope.feeds to not be immediately populated.

To address this problem, consider the following solution:

$scope.feeds = FeedList.get();
$scope.feeds.then(function () {
    // Loading of $scope.feeds is now complete
    window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

    console.log('TEST : ' + window.localStorage['savedData']);
    console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
    console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));
});

Note: Upon reviewing the code for your service, it appears that it does not return a promise. To enable consumers of your service to wait for results, you must implement this feature:

.service('FeedList', function ($rootScope, $q, FeedLoader) {
    var feeds;
    this.get = function() {
        var feedSources = [
            {title: 'rss1', url: 'http://www.website.com/rss/feed/rss_feed_25300'},
            {title: 'rss2', url: 'http://www.website.com/rss/feed/rss_feed_10720'},
        ];

        if (!feeds) {
            var feedPromises = feedSources.map(function (source) {
                return FeedLoader.fetch({q: source.url, num: 10}, {}).$promise
                .then(function (data) {
                    return data.responseData.feed.entries;
                });
            });

            feeds = $q.all(feedPromises)
            .then(function (retrievedFeeds) {
               return Array.prototype.concat([], retrievedFeeds);                
            });
        }
        return feeds;
    };
})

Answer 2

The issue at hand is that FeedList.get() relies on asynchronous operations, causing $scope.feeds to not be immediately populated.

To address this problem, consider the following solution:

$scope.feeds = FeedList.get();
$scope.feeds.then(function () {
    // Loading of $scope.feeds is now complete
    window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

    console.log('TEST : ' + window.localStorage['savedData']);
    console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
    console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));
});

Note: Upon reviewing the code for your service, it appears that it does not return a promise. To enable consumers of your service to wait for results, you must implement this feature:

.service('FeedList', function ($rootScope, $q, FeedLoader) {
    var feeds;
    this.get = function() {
        var feedSources = [
            {title: 'rss1', url: 'http://www.website.com/rss/feed/rss_feed_25300'},
            {title: 'rss2', url: 'http://www.website.com/rss/feed/rss_feed_10720'},
        ];

        if (!feeds) {
            var feedPromises = feedSources.map(function (source) {
                return FeedLoader.fetch({q: source.url, num: 10}, {}).$promise
                .then(function (data) {
                    return data.responseData.feed.entries;
                });
            });

            feeds = $q.all(feedPromises)
            .then(function (retrievedFeeds) {
               return Array.prototype.concat([], retrievedFeeds);                
            });
        }
        return feeds;
    };
})

Answer 3

Answer №2

The issue arises from insufficient handling of asynchronous requests. In order to rectify this:

$scope.feeds = [];

console.log('TEST : Load feeds asynchronously');

FeedList.get().then(function () { // each feed comes as argument
    angular.forEach(arguments, function (feed) {
        $scope.feeds.concat(feed); // merge arrays
    });

    window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

    console.log('TEST : ' + window.localStorage['savedData']);
    console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
    console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));
});

Service:

.service('FeedList', function ($q, $rootScope, FeedLoader) {
    this.get = function () {
        var promises = []; // to handle async loading 

        var feedSources = [{
            title: 'rss1',
            url: 'http://www.website.com/rss/feed/rss_feed_25300'
        }, {
            title: 'rss2',
            url: 'http://www.website.com/rss/feed/rss_feed_10720'
        }];

        angular.forEach(feedSources, function (source) {
            var defer = $q.defer();

            FeedLoader.fetch({
                q: source.url,
                num: 10
            }, {}, function (data) {
                var feed = data.responseData.feed;
                defer.resolve(feed.entries); // todo - need to handle errors with 'defer.reject'
            });

            promises.push(defer.promise);
        });

        return $q.all(promises);
    };
})

Answer 4

The issue arises from insufficient handling of asynchronous requests. In order to rectify this:

$scope.feeds = [];

console.log('TEST : Load feeds asynchronously');

FeedList.get().then(function () { // each feed comes as argument
    angular.forEach(arguments, function (feed) {
        $scope.feeds.concat(feed); // merge arrays
    });

    window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

    console.log('TEST : ' + window.localStorage['savedData']);
    console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
    console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));
});

Service:

.service('FeedList', function ($q, $rootScope, FeedLoader) {
    this.get = function () {
        var promises = []; // to handle async loading 

        var feedSources = [{
            title: 'rss1',
            url: 'http://www.website.com/rss/feed/rss_feed_25300'
        }, {
            title: 'rss2',
            url: 'http://www.website.com/rss/feed/rss_feed_10720'
        }];

        angular.forEach(feedSources, function (source) {
            var defer = $q.defer();

            FeedLoader.fetch({
                q: source.url,
                num: 10
            }, {}, function (data) {
                var feed = data.responseData.feed;
                defer.resolve(feed.entries); // todo - need to handle errors with 'defer.reject'
            });

            promises.push(defer.promise);
        });

        return $q.all(promises);
    };
})

Tips for saving data fetched from a $resource into localStorage?

Answer №1

Answer №2

Similar questions

Steps for Loading Image after Preloader:1. Set up a preloader

Accessing JSON data from a URL in AngularJS

As for the Pixel Art Creator feature, you can now switch between different modes and

Is executing JavaScript possible within the <script src="..."></script> tags?

Use AngularJs service injected in run closure for testing purposes

Iterate through a modified list in Vue.js using a parameter

Tips for testing a directive that binds data from a controller

How can one easily remove the parent directory from a path when working with Node.js?

Interfacing Node JS with Java Web Services via SOAP

What is the best method for securely transferring login credentials from foo.com to bar.com?

What is the best way to assign a unique ID to every element in this situation?

I am seeking to incorporate several Three.js animations into my HTML document, but I am experiencing issues with them

Accessing Angular scope values from a different function within the same controller may not be possible due to encapsulation

Unable to reload kendo data grid by clicking a button in AngularJS

Discover the power of combining Go with Angular's ui-router to

Instructions for developing an offset plugin for an HTML5 video player

Working with arrays and elements in JavaScript using regular expressions

Tips on efficiently adding and removing elements in an array at specific positions, all the while adjusting the positions accordingly

Passing props down in Next.js when working with children components

Utilizing Next.js to conditionally display data