Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Cameron Bourke
Cameron Bourke
10,198 Points

Local Storage with AngularJS

Hey everyone. I'm trying to build the standard "to-do" app in an effort to learn AngularJS. I've been able to hack my way through until I hit localStorage. If someone could enlighten me as to what I am doing wrong, I will be forever in your debt! haha.

To give you some context to the js below. The app is a simple list of to-do's with a modal view that has a form which lets you create a new list item. I'm trying to store the object submitted by the form to localStorage, and then deleting it from localStorage when the onItemDelete function is called.

.controller('AppCtrl', function($scope) {

    // Creating a key for localStorage and initialising it to an array of object/s which will be the first list item when the app loads which will act as an example
    window.localStorage['items'] = JSON.stringify([{ 
      title: 'You Owe Me Now',
      fullName: 'Cameron Bourke',
      dollarAmount: '2',
      description: 'You owe me $2 for downloading this app. Only kidding!! This is just an example of a "Theyo". Delete me now by swiping to the left and enjoy.'
    }]);

    // Cache the JSON object in [items] to call later
    $scope.contacts = JSON.parse(localStorage.getItem('items')) || [];

    // When submit button is pressed it will push the object to the array in localStorage
    $scope.createContact = function(u) {     
      $scope.contacts.push({ fullName: u.fullName,
                             title: u.title,
                             dollarAmount: u.dollarAmount,
                             description: u.description });
      u.fullName = '';
      u.title = '';
      u.dollarAmount = '';
      u.description = '';
      $scope.modal.hide();
    };

    // When the delete button is pressed, it will find the corresponding item's index from localStorage and splice it
    $scope.onItemDelete = function(item) {
      $scope.contacts.splice($scope.contacts.indexOf(item), 1);
    };

After spending 6hrs trying to get it to work, I'm not sure if the code makes sense anymore even to me. I really appreciate the time taken to help out! Even if it's just to point out little things. All helps me get closer to the solution. Also I'm using ng-repeat for the list items.

// I'm using the Ionic Framework, however it still acts like a normal ng-repeat on say a list item.
 <ion-item ng-repeat="contact in contacts" item="item">

Thanks in advance to everyone!

Cheers, Cam

1 Answer

eck
eck
43,038 Points

Hey Cam,

I threw together a jsfiddle that illustrates adding and removing data from localStorage. Hopefully this gives you an idea on how you can implement this type of feature with your angular project.

Feel free to ask questions if something is not explained enough in the fiddle!

Cameron Bourke
Cameron Bourke
10,198 Points

Thanks heaps for doing that jsfiddle. It has cleared a few things up for me.

I did a few console.log's on my code to see where it is falling apart. It seems like the createContact function isn't pushing the object to the array stored in local storage. 

$scope.createContact = function(u) {     
      $scope.contacts.push({ fullName: u.fullName,
                             title: u.title,
                             dollarAmount: u.dollarAmount,
                             description: u.description });
      u.fullName = '';
      u.title = '';
      u.dollarAmount = '';
      u.description = '';
      $scope.modal.hide();
 };

I also updated my code in the question, which had a few syntax errors.

Anything look out of place?

Cheers again man.

eck
eck
43,038 Points

So, since I thought it would be fun and because I want to acquire some Angular skillz myself, I did another jsfiddle where I built a functional version of the app you are working on.

I hope that it is commented clearly enough for you to get an idea of what is going on.

If you have questions feel free to ask and I'll do my best to offer further assistance :D

Cameron Bourke
Cameron Bourke
10,198 Points

You're a hero man! That should be more than enough to figure my way around. Thanks for the effort, I really appreciate, you are one of the guys that make treehouse such a great resource for everyone.