How to push the json(object) to array in local storage angular js?

Question

I am trying to do use the angular push function but it is not working.

i am storing form values into local storage every time it will be replacing the old object with new object...

I want to add strings (or objects) into an array.

Below is my HTML code:

<form name="myForm" novalidate>
    <p> Username:<br>
        <input type="text" name="user" ng-model="user.user" required>
        <span ng-show="myForm.user.$pristine"/>
    </p>
        <p>Email:<br>
            <input type="email" name="email" ng-model="user.email" required>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.email">Invalid email address.</span>
            </span>
        </p>

            <p> PhoneNum:<br>
                <input type="number" name="PhoneNum" ng-model="user.PhoneNum" required>
                <span ng-show="myForm.PhoneNum.$pristine"></span>
            </p>
                <p>Address:<br>
                    <input type="text" name="address" ng-model="user.address" required>
                    <span ng-show="myForm.address.$pristine"></span>
                </p>
                    <p>Password:<br>
                        <input type="Password" name="pass" ng-model="user.pass" required>
                        <span ng-show="myForm.pass.$pristine"  />
                    </p>
                        <p>
                            <input type="submit" ng-click="addItem(user)" ng-disabled="myForm.$invalid">
                        </p>

</form>
<pre>user = {{user | json}}</pre>
<table>
{{userdata}}
    <tr>
        <td>user</td>
        <td>Email</td>
        <td>Phone</td>
        <td>Address</td>
        <td>Password</td>
    </tr>
    <tr ng-repeat="x in userArray">
        <td>{{x.user}}</td>
        <td>{{x.email}}</td>
        <td>{{x.PhoneNum}}</td>
        <td>{{x.address}}</td>
        <td>{{x.pass}}</td>
    </tr>
</table>

Below is my js code:

var app = angular.module("myApp", ['ngRoute','ngStorage']);
app.controller("userCtrl",['$scope','$localStorage','$log',function($scope,$localStorage,$log){
    $scope.userArray=[];
    $scope.userdata=$localStorage.data;

    $scope.addItem=function(user){    
        //var current=$localStorage.data;
        //$scope.userArray=userArray.concat(user);
        $log.log($scope.userArray);
        $scope.userArray.push(user);
        $localStorage.data=$scope.userArray;
        $scope.userdata=$localStorage.data;
    }

}]);

Works fine in this DEMO on PLNKR.

georgeawg
– georgeawg

2017-07-02 08:34:40 +00:00
Commented Jul 2, 2017 at 8:34 — georgeawg
– georgeawg, Commented Jul 2, 2017 at 8:34

Babu · Accepted Answer · 2017-07-07 08:04:39Z

1

$scope.userArray = [];
    $scope.userdata = $localStorage.data;

    $scope.addItem = function(user) {
      $scope.userArray.push(user);
      $scope.user = {};
      $localStorage.data = $scope.userArray;
      $scope.userdata = $localStorage.data;
    }

answered Jul 7, 2017 at 8:04

Babu

1371 gold badge1 silver badge17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dinesh undefined · Accepted Answer · 2017-07-02 07:29:59Z

0

Get the localstorage data before assigning to localstorage. use JSON.Stringify before storing and use JSON.prase before accesing.

$scope.userArray.push(user);

var temp = JSON.parse($localStorage.data);// get it before pushing.

temp.push($scope.userArray);//push to temp

$localStorage.data =JSON.stringify(temp);//assing temp to localStorage

$scope.userdata=$localStorage.data;

answered Jul 2, 2017 at 7:29

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

4 Comments

ippi Over a year ago

I believe in this context it has to be mentioned that the reason is that you can only store strings in localstorage.

Babu Over a year ago

I am getting an error updated to your code ... ( Unexpected token u in JSON at position 0) @Dinesh

Babu Over a year ago

Unexpected token u in JSON at position 0 @Dinesh and local storage shows no data

Dinesh undefined Over a year ago

var temp = JSON.parse($localStorage.data) || []; try this line

Collectives™ on Stack Overflow

How to push the json(object) to array in local storage angular js?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related