How to push items in a nested array with AngularJs

Question

I'm looking for two things:

To push items in a nested array with Angularjs
To understand how it works exactly.

I've been looking for answers on differents previous topic but I didn't manage to come to a solution.

Actually, I want to use an Add Item button to push an item in a items array under a facture object.

Here is my controller:

PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {

   Facture.get({ id: $stateParams.factureId }, function(data) {
       $scope.facture = data;
   });

   $scope.ajouterItem = function(index, item){
    $scope.facture.items[index].item.push({
      description: 'Test'
    });
   }

});

And here is my data structure (as returned by my API)

  {
     "id":10200,
     "client_id":1,
     "lead_id":1,
     "courtedescription":"Description test",
     "etat":"En attente",
     "created_at":"2015-02-21 15:07:17",
     "updated_at":"2015-02-21 15:07:17",
     "items":[
        {
           "id":1,
           "facture_id":10200,
           "description":"Item num\u00e9ro 1",
           "prix":"15.00",
           "tps":"0.75",
           "tvq":"1.50",
           "grandtotal":"17.25",
           "created_at":"2015-02-21 15:07:18",
           "updated_at":"2015-02-21 15:07:18"
        },
        {
           "id":2,
           "facture_id":10200,
           "description":"Deuxi\u00e8me item quoi",
           "prix":"135.00",
           "tps":"6.75",
           "tvq":"13.47",
           "grandtotal":"155.22",
           "created_at":"2015-02-21 15:07:18",
           "updated_at":"2015-02-21 15:07:18"
        }
     ]
  }

Of course my HTML contains a button:

<form ng-submit="ajouterItem(item)">
   <button class="btn btn-primary">Ajouter un item</button>
</form>

Actually I got an error (undefined) when I press to button. What is wrong?

Interesting that your ng-submit passes in a single param, but your function expects (and attempts to use) both an index and an item. Perhaps item is what's undefined? — Marc
– Marc, Commented Mar 15, 2015 at 21:51

Arun Saini · Accepted Answer · 2019-03-01 09:15:55Z

For those who are still looking for pushing data in the nested array can refer below example of Comments and Replies :

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>


    <div ng-app="myApp" ng-controller="myCtrl">

        <!--Comment section-->
        <ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
            <li>
                <b>Comment {{$index}} : </b>
                <br>
                {{comment.comment}}
                <!--Reply section-->
                    <ul ng-repeat="reply in comment.reply track by $index">
                        <li><i>Reply {{$index}} :</i><br>
                            {{reply.comment}}</li>
                    </ul>
                <!--End reply section-->
                <input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a>
            </li>
        </ul>
        <!--End comment section -->
            

        <!--Post your comment-->
        <b>New comment</b>
        <input type="text" placeholder="Your comment" ng-model="comment" />
        <a href="" ng-click="newComment(comment)">Post </a>
    </div>


    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {

            //Comments object having reply oject
            $scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];

            //push reply
            $scope.insertReply = function (index, reply) {
                $scope.comments[index].reply.push({ comment: reply });
            }

            //push commnet
            $scope.newComment = function (comment) {
                $scope.comments.push({ comment: comment, reply: [] });
            }
        });
    </script>

</body>
</html>

Erik Svedin · Accepted Answer · 2015-03-15 21:53:44Z

0

Since there is no item property inside the items array objects, you cant push to it. You have to add:

$scope.facture.items[index].item = []

before you can push to it. Also check your functions parameters as Marc states in his comment. Since we can't see all of the markup it is unclear what is passed to the function, a simple console.log() will show you that ofcourse.

answered Mar 15, 2015 at 21:53

Erik Svedin

1,28612 silver badges26 bronze badges

Comments

Lucien Dubois · Accepted Answer · 2015-03-15 23:20:25Z

0

I found the answer, it was finaly simpler than I first thought:

$scope.ajouterItem = function(){
    $scope.facture.items.push({
      description: 'Test'
    });
}

answered Mar 15, 2015 at 23:20

Lucien Dubois

1,7765 gold badges34 silver badges58 bronze badges

Comments

zokaee hamid · Accepted Answer · 2019-03-01 08:37:29Z

First, create a variable to fill, delete, and add items. Next, assign this variable to the array inside the model.

PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture ) 
{
    $scope.items= [];

    Facture.get({ id: $stateParams.factureId }, function(data) {
       $scope.facture = data;
       $scope.items = $scope.facture.items;
    });

    $scope.ajouterItem = function(item){
        $scope.items.push(item);
        $scope.facture.Items = $scope.items;
    }

});

In this way, you can also edit the previous information and add new information. Since we first set "items". To remove the same as usual :

$scope.RemoveItem = function (index) {
    $scope.facture.Items.splice(index, 1);
};

Collectives™ on Stack Overflow

How to push items in a nested array with AngularJs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related