Verifying the presence of JSON data loaded directly from the server to decide whether the factory should initiate a request to retrieve the same data if it is not already available

Question

Verifying the presence of JSON data loaded directly from the server to decide whether the factory should initiate a request to retrieve the same data if it is not already available

I am currently developing an Angular application that is designed to load a JSON object from the server on page load, either freshly or if it doesn't already exist. I'm wondering how one could use a service or factory to check for the presence of this JSON object on the page. If it is found, the app should use that data and inject it into the controller. However, if the JSON object is not present, the app should make a request to the server to retrieve it.

For example:

var data = {item1: foo, item2: bar, item3: baz}

If this data exists on page load, Angular will utilize the 'data' variable as the foundation to construct the model. But if the data is not available, the app would then contact the server to obtain the same object and use that information instead.

While I am still relatively new to Angular, I have acquired enough knowledge to understand how to perform AJAX requests and properly bind returned data. In this specific scenario, my main inquiry is regarding the appropriate method to verify the existence of data in order to determine whether a call to the server is required during app execution.

javascript angularjs

Answer 1

Answer №1

To efficiently manage data retrieved from an API, you can utilize $cacheFactory in AngularJS to create a cache singleton.

var app = angular.module('myApp', []);

app.factory('cache', function ($cacheFactory) {
    var cache = $cacheFactory('myCache');
    return cache;
});

app.factory('myFactory', function (cache) {
    return {
        getData: function () {
            if (cache.get('mydata') !== undefined) {
                console.log('Retrieving from cache...');
            } else {
                cache.put('mydata', {
                    item1: 'foo',
                    item2: 'foo'
                });
                console.log('New data added to cache.');
            }
            return cache.get('mydata');
        }
    }
});

function Ctrl($scope, myFactory) {
    myFactory.getData() // New data added to cache.
    myFactory.getData() // Retrieving from cache...
    myFactory.getData() // Retrieving from cache...
}

View Working Demo

Answer 2

To efficiently manage data retrieved from an API, you can utilize $cacheFactory in AngularJS to create a cache singleton.

var app = angular.module('myApp', []);

app.factory('cache', function ($cacheFactory) {
    var cache = $cacheFactory('myCache');
    return cache;
});

app.factory('myFactory', function (cache) {
    return {
        getData: function () {
            if (cache.get('mydata') !== undefined) {
                console.log('Retrieving from cache...');
            } else {
                cache.put('mydata', {
                    item1: 'foo',
                    item2: 'foo'
                });
                console.log('New data added to cache.');
            }
            return cache.get('mydata');
        }
    }
});

function Ctrl($scope, myFactory) {
    myFactory.getData() // New data added to cache.
    myFactory.getData() // Retrieving from cache...
    myFactory.getData() // Retrieving from cache...
}

View Working Demo

Verifying the presence of JSON data loaded directly from the server to decide whether the factory should initiate a request to retrieve the same data if it is not already available

Answer №1

Similar questions

The URL in React Router updates as expected, but when attempting to render a component using a button component link

Retrieving data from a nested object with varying key names through ng-repeat

My goal is to prevent users from using the Backspace key within the input field

My goal is to have the "show more" button reveal extra information without having to reload the entire page

The node.js express app.get and app.post are currently malfunctioning

How can we extract validation data from a function using Ajax and then transfer that information to another Ajax query?

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

Angular failing to reflect changes in my select element according to the model

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Inserting star ratings into a MySQL database using a form and AJAX request

Issue encountered when invoking the callback function in Node.js with console prompt libraries

The TypeAhead feature fails to display any search results for the entered query

I'm having trouble accessing the data stored in req.user within the user controller, despite having integrated it into the user isLoggedIn middleware

The download attribute is not functioning properly on both Chrome and Edge browsers

Encountered an undefined error while trying to read promises

Retrieve props in a Vue component using the available context

The functionality of activating a button is not functioning as expected in AngularJS framework

Steps for calling a function in index.js using Node.js

The validation errors in the form of CodeIgniter are not being displayed by the JavaScript variable

Plugin for turning text into "leet speak" using jQuery and Javascript