Angular forEach Function and Local Storage

Question

Hi,

Would really appreciate it if someone could help me with this problem.

I am trying to develop a Angular Web App that is similar to a check-list with a count function, so basically a user will get a list of football grounds and check off which ones they have visited, and then the count will go down. However at the minute it doesn't save whether the user has checked a ground off when the page has been refreshed or closed down (which is expected) however I am trying to achieve this.

So, I have got as far as adding the grounds into an array, which I can see in Chrome's developer tools, however I am struggling when wanting to firstly find out if the user has checked any grounds off previously through Local Storage, then showing the previously checked boxes. Hope this makes sense!

Does anyone know how this can be achieved or point me in a good direction? Be much appreciated!

Current code:

angular.module('trackerApp', [])

    .controller('TrackerController', ['$scope','$http', function ($scope,$http) {
        $http.get("grounds.json").success(function(data)
            {
                $scope.grounds = data;
                localStorage.setItem("grounds", JSON.stringify(data));
            });

        $scope.remaining = function() {
        var visited=[]
        angular.forEach($scope.grounds,function(ground){

            if (ground.done) {
                visited.push(ground);
            }
        })
                console.log(visited);
        //put the array into localStorage
        //retrieve array

                var count = 0;
                angular.forEach($scope.grounds, function(check) {
                    //console.log(check.done)
                count += check.done ? 0 : 1;
            });
        return count;
            };

    }]);

<!doctype html>
<!-- trackerApp module running on all page -->
<html ng-app="trackerApp">
  <head>
    <script src="angular.min.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
  <h1>Football Ground Tracker</h1>

  <!-- Tracker controller scope -->
  <div ng-controller="TrackerController">

    <!-- remaining/grounds/club object can be accessed in this TrackerController because it's on the scope in the todo.js file -->
    <span>{{remaining()}} of {{grounds.length}} remaining</span>

    <ul>
      <li ng-repeat="check in grounds | orderBy: ['league','club'] "><!-- loop over variable check and grounds then order by league followed by club -->
        <input type="checkbox" ng-model="check.done"><!-- the ng-model directive represents the data binding process to the function check.done in main.js -->
        <span class="done-{{check.done}}">{{check.club}} - {{check.grounds}}</span>
      </li>
    </ul>

  </div>
  </body>
</html>

Cheers in advance

Answer 1 · 2015-03-13T18:09:53Z

March 13, 2015 6:09pm

Hey Scott:

If you add an ng-change directive to your checkbox input, you can set up a method to fire whenever someone checks or unchecks a checkbox. I set it to a saveGrounds method that simply saves the grounds items to localStorage.

The HTML:

<input type="checkbox" ng-model="check.done" ng-change="saveGrounds()">

And the controller method:

$scope.saveGrounds = function () {
    localStorage.setItem('grounds', JSON.stringify($scope.grounds));
};

From there you can make your initial data call ($http.get) into an if/else statement to check localStorage:

        if (localStorage.getItem('grounds')) {
            $scope.grounds = JSON.parse(localStorage.getItem('grounds'));
        } else {
            $http.get("grounds.json").success(function(data) {
                $scope.grounds = data;
                localStorage.setItem("grounds", JSON.stringify(data));
            });
        }

That should allow your app to keep the count of visited and remaining grounds.

Let me know if you have any questions!

-Andrew

Answer 2 · 2015-04-03T22:45:46Z

April 3, 2015 10:45pm

Hi Andrew, thanks for the reply, the issue I'm running into is that I'm calling the list based on a league ID, so when I applied the method you suggested last time, it bring up the same list no matter what league the user clicks on (hope that makes sense). So is there a way I can adjust the method to call the list of teams based on the league the user clicks on then apply the method to check if the user has previously checked off any teams in that league?

Here is a link to the original application where the method you suggested worked - http://helios.hud.ac.uk/u1170593/version1/index.html

And a link to the new application - http://helios.hud.ac.uk/u1170593/MyApp/index.html#/league

I understand you are probably very busy so any help and advice is much appreciated!

Welcome to the Treehouse Community

Looking to learn something new?

Scott Tolan

Scott Tolan

Angular forEach Function and Local Storage

Greg Kaleka

Greg Kaleka

Scott Tolan

Scott Tolan

Greg Kaleka

Greg Kaleka

2 Answers

Andrew Kiernan

Andrew Kiernan

Scott Tolan

Scott Tolan

Scott Tolan

Scott Tolan

Andrew Kiernan

Andrew Kiernan

Scott Tolan

Scott Tolan