What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

Question

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

I am currently in the process of learning angular as I develop a web application that resembles a todo list, specifically focused on football teams. In this application, users can navigate through a menu to select a league from four options. The application then retrieves data based on the league selected and displays a list of teams with checkboxes. Users can check off the football grounds they have visited during the season.

While the functionality works smoothly, I am looking for guidance on how to store user selections using localStorage and retrieve them upon page load.

Initially, I attempted to use the ng-change() method but encountered issues with displaying the correct data for each league due to retrieving the same data from localStorage instead of the JSON file corresponding to the ID. Any advice or assistance on resolving this would be highly appreciated!

Below is the HTML markup containing the teams and checkboxes:

<ul class="list-unstyled">
  <li ng-repeat="club in league" ng-click="selectClub(club.id)">
    <input type="checkbox" ng-model="club.done">
    <a href="#/team">{{club.club}} - {{club.ground}}</a>
  </li>
</ul>

Here is the controller code responsible for fetching the league ID and loading the data:

trackerControllers.controller('ClubCtrl',  ['$scope', '$http', function($scope, $http) {
    var leagueId=sessionStorage.getItem("leagueId");
    $http.get('JSON/Leagues/league'+leagueId+'.json').success(function(data) {
        $scope.league = data;
    });
}]);

If there are any suggestions to improve the clarity of my question, please feel free to provide them. Thank you!

To better visualize the site, here is the link to the new version:

For reference, here is the link to the old version where data was stored differently:

javascript arrays json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Monitor changes in the checkbox for each club and update localStorage whenever there is a change.

<ul class="list-unstyled">
  <li ng-repeat="club in league" ng-click="selectClub(club.id)">
    <input type="checkbox" ng-model="club.done" ng-change="updateClub(club)">
    <a href="#/team">{{club.club}} - {{club.ground}}</a>
  </li>
</ul>

$scope.updateClub = function (club) {
    var key = 'clubId-' + club.id;
    if (club.done) {
        localStorage.setItem(key, 'viewed');
    } else {
        localStorage.removeItem(key);
    }
};

When fetching data, verify if each club has been viewed previously.

trackerControllers.controller('ClubCtrl',  ['$scope', '$http', function($scope, $http) {
    var leagueId=sessionStorage.getItem("leagueId");
    $http.get('JSON/Leagues/league'+leagueId+'.json').success(function(data) {
        var i;
        for (i = 0; i < data.length; i++) {
            // check if this team has been viewed
            data[i].done = localStorage.getItem('clubId-' + data[i].id) === 'viewed';
        }
        $scope.league = data;
    });
}]);

Answer 2

Monitor changes in the checkbox for each club and update localStorage whenever there is a change.

<ul class="list-unstyled">
  <li ng-repeat="club in league" ng-click="selectClub(club.id)">
    <input type="checkbox" ng-model="club.done" ng-change="updateClub(club)">
    <a href="#/team">{{club.club}} - {{club.ground}}</a>
  </li>
</ul>

$scope.updateClub = function (club) {
    var key = 'clubId-' + club.id;
    if (club.done) {
        localStorage.setItem(key, 'viewed');
    } else {
        localStorage.removeItem(key);
    }
};

When fetching data, verify if each club has been viewed previously.

trackerControllers.controller('ClubCtrl',  ['$scope', '$http', function($scope, $http) {
    var leagueId=sessionStorage.getItem("leagueId");
    $http.get('JSON/Leagues/league'+leagueId+'.json').success(function(data) {
        var i;
        for (i = 0; i < data.length; i++) {
            // check if this team has been viewed
            data[i].done = localStorage.getItem('clubId-' + data[i].id) === 'viewed';
        }
        $scope.league = data;
    });
}]);

Answer 3

Answer №2

The program will take the identification number of the selection and load the following page by sending a request for a JSON file over HTTP.

One of the strengths of Angular is its ability to dynamically render different templates or views on the same URL, rather than loading separate pages like a traditional website would do. This eliminates the need to "pass" variables between pages, as you can simply store them within the scope.

For example, upon user interaction:

$scope.leagueId = 1;

Since the scope is accessible to the controller, you can easily retrieve the LeagueId value from it.

$http.get('JSON/Leagues/league' + $scope.leagueId + '.json').success(function(data) {
   $scope.league = data;
});

I recommend utilizing a database to store your data and implementing queries to retrieve specific information based on input parameters. It's also advisable to access the data from a service or factory instead of directly from the controller.

Update:

After reviewing the question again, it seems that you intend to persistently save user inputs. To achieve this, you'll require database storage and user authentication systems to identify users and track their actions.

Here's an ideal setup:

User table for storing user credentials (login)
Action table defining user-permissible actions
User-Action table recording which users have performed which actions

Using $scope won't suffice since it ends when the browser closes, session storage isn't reliable due to expiration, and cookies are limited to individual devices. Hence, a more robust solution involving databases and authentication mechanisms is necessary.

Answer 4

The program will take the identification number of the selection and load the following page by sending a request for a JSON file over HTTP.

One of the strengths of Angular is its ability to dynamically render different templates or views on the same URL, rather than loading separate pages like a traditional website would do. This eliminates the need to "pass" variables between pages, as you can simply store them within the scope.

For example, upon user interaction:

$scope.leagueId = 1;

Since the scope is accessible to the controller, you can easily retrieve the LeagueId value from it.

$http.get('JSON/Leagues/league' + $scope.leagueId + '.json').success(function(data) {
   $scope.league = data;
});

I recommend utilizing a database to store your data and implementing queries to retrieve specific information based on input parameters. It's also advisable to access the data from a service or factory instead of directly from the controller.

Update:

After reviewing the question again, it seems that you intend to persistently save user inputs. To achieve this, you'll require database storage and user authentication systems to identify users and track their actions.

Here's an ideal setup:

User table for storing user credentials (login)
Action table defining user-permissible actions
User-Action table recording which users have performed which actions

Using $scope won't suffice since it ends when the browser closes, session storage isn't reliable due to expiration, and cookies are limited to individual devices. Hence, a more robust solution involving databases and authentication mechanisms is necessary.

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

Answer №1

Answer №2

Similar questions

Experience the magic of Materialize CSS SideNav

Guide to dynamically loading customer data into an HTML table using JavaScript

Mastering the art of invoking a JavaScript function from a GridView Selected Index Changed event

Cannot see the created item in Rails application when using RSpec, Capybara, Selenium, and JavaScript

Establish a React component to observe socket.io

Converting JSON data from an API file into a CSV format

Accessing a specific data point from a Rest Api with React JS

What is the best way to determine the position of a letter within a string? (Using Python, JavaScript, Ruby, PHP, etc...)

The Ladda spin animation continues spinning for an additional second after the stop() function is called

Leverage and repurpose OOP objects

Is it possible to modify the HTML/CSS of a child component using the parent component in Angular 2+?

Errors in Data Capture from AJAX Dropdown Selections

Constantly encountering crashes with Swifty JSON

Modifying Parent Component Layout Using Vue.js

Employing the JSON return code

Converting JSON Data to DataFrame in Scala with Nested Structures

Unable to transform into a tangible entity

Obtaining a cookie in Vue.js independently: a step-by-step guide

Why isn't my List<string> being retrieved from the MVC Controller in an $ajax request?

Challenge with Filter Functionality when Activating Button