Insert an Object into an Array

Question

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 !

Debug this line: vendeursList = $localStorage.objVendeur;. It is very possible that $localStorage.objVendeur is returning something that is not an array or something which has not the funciton push. — lealceldeiro
– lealceldeiro, Commented Dec 1, 2017 at 13:53
It's for a new job, i must use angular v1. Yep, i think the problem comes from $localStorage. When i comment " vendeursList = $localStorage.objVendeur;" and "$localStorage.objVendeur = vendeursList;". There is no more error. — Naugrim.
– Naugrim., Commented Dec 1, 2017 at 14:23

Vandesh · Accepted Answer · 2017-12-01 14:16:52Z

3

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 = [];
    }

edited Dec 1, 2017 at 14:16

answered Dec 1, 2017 at 13:58

Vandesh

6,9642 gold badges32 silver badges38 bronze badges

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

Comments

Naugrim. · Accepted Answer · 2017-12-01 16:48:43Z

0

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;

});
})();

edited Dec 1, 2017 at 16:48

answered Dec 1, 2017 at 13:58

Naugrim.

1502 silver badges12 bronze badges

Collectives™ on Stack Overflow

Insert an Object into an Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related