CODEWITHSUNDEEP
angularjs
Naugrim.
Naugrim.

Reputation: 150

Insert an Object into an Array

I create a fake App to test AngularJs. I use LocalStorage with ngStorage. My problem is that i can't to put an Object with Datas in an Array. When i try, i have an error message that i don't understand :

"Error: vendeursList.push is not a function [etc...]"

Here my code :

HTML :

<div ng-controller='vendeursController'>
<h2 class='test'>Vendeurs.</h2>
<table>
    <thead>
      <tr><th colspan="4">Liste des vendeurs</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="vendeur in objVendeur">
        <td>{{$index + 1}}</td>
        <td>
          {{vendeur.Vendeur.nom}}&nbsp;{{vendeur.Vendeur.prenom}}
        </td>
        <td>{{vendeur.mail}}</td>
        <td>{{vendeur.adresse}}</td>
      </tr>
    </tbody>
</table>

<form class='simple-form'>
    <br>
    <input type="text" ng-model="vendeur.Vendeur.nom" name="nom" value="Nom" required><br>
    <br>
    <input type="text" ng-model="vendeur.Vendeur.prenom" name="prenom" value="Prenom" required><br><br>
    <br>
    <input type="text" ng-model="vendeur.mail" name="mail" value="Mail" required><br><br>        
    <br>
    <input type="text" ng-model="vendeur.adresse" name="adresse" value="Adresse" required><br><br>
    <input ng-click="saveData()" type="submit" value="Submit">
</form>

<pre>nom = "{{vendeur | json}}"</pre>

JS:

(function() {
  'use strict';

angular.module('app.vendeurController', ["ngStorage"]).
controller('vendeursController', function($scope, $http, $localStorage){

    $scope.vendeur = {};
    var vendeursList = [];

    $scope.saveData = function() {
        vendeursList = $localStorage.objVendeur;
        var nVendeur = angular.copy($scope.vendeur);
        vendeursList.push(nVendeur);
        $localStorage.objVendeur = vendeursList;
    }

});
})();

Thanks !

Upvotes: 1

Views: 89

Answers (2)

Naugrim.
Naugrim.

Reputation: 150

I try to understand why, but this code is good.

(function() {
'use strict';

angular.module('app.vendeurController', ["ngStorage"]).
controller('vendeursController', function($scope, $http, $localStorage){

    $scope.vendeur = {};
    $scope.objVendeur = [];

    $scope.saveData = function() {
        $localStorage.objVendeur.push(angular.copy($scope.vendeur));
    }

    $scope.objVendeur = $localStorage.objVendeur;

});
})();

Upvotes: 0

Vandesh
Vandesh

Reputation: 6894

You should use JSON.stringify and JSON.parse to get and set items in localStorage. You could use something like - 

 (function() {
      'use strict';

    angular.module('app.vendeurController', ["ngStorage"]).
    controller('vendeursController', function($scope, $http, $localStorage){

        $scope.vendeur = {};
        var vendeursList = [];

        $scope.saveData = function() {
            vendeursList = JSON.parse(localStorage.getItem('objVendeur'));
            var nVendeur = angular.copy($scope.vendeur);
            vendeursList.push(nVendeur);
           localStorage.setItem('objVendeur',JSON.stringify(vendeursList));
        }

    });
    })();

Also, check your logic if vendeursList is empty before pushing to it.
Eg:
// After parsing from localStorage 

    if(!venduersList){
       vendeursList = [];
    }

Upvotes: 3

Related Questions