Push json data to existing array in angular js

Question

I'm having issues with pushing data to an existing array. You can see I'm posting the data to a table, however, when a user enters an 8 digit barcode, I like to push the data to the table.

enter image description here

Factory

    angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {
        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(data).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [{
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    }],
            add: function(item) {
                this.items.push(item);
                console.log(item);
            }
        };
    }
]);

Controller

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

HTML

<div ng-controller="ScanListCtrl">
<div class="row prepend-top-md">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-barcode"></i>&nbspScan Item</h3>
            </div>
            <div class="panel-body">
                <div class="input-group input-group-lg">
                    <input type="number" class="form-control" placeholder="Scan Item" ng-model="BarcodeValue"
                        ng-change="autoAddItem()" is-focus>
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button" ng-click="addRow()">
                            Add Barcode</button>
                    </span></div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 3%">
                            #
                        </th>
                        <th>
                            <i class="fa fa-barcode"></i>&nbspBarcode
                        </th>
                        <th>
                            <i class="fa fa-medkit"></i>&nbspCSN
                        </th>
                        <th>
                            <i class="fa fa-user"></i>&nbspUser
                        </th>
                        <th>
                            <i class="fa fa-clock-o"></i>&nbspDate
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:'Id':true:reverse">
                        <td class="text-center">
                            [{{item.Id}}]
                        </td>
                        <td>
                            {{item.BarcodeValue}}
                        </td>
                        <td>
                            {{item.CSN}}
                        </td>
                        <td>
                            {{item.LastName + ', ' + item.FirstName}}
                        </td>
                        <td>
                            {{item.Created}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

In your controller, you're assigning to $scope.items twice. The original reference you have to pickUpServ.items is being replaced with a new array of items returned from the POST request. Was this intended? — Decade Moon
– Decade Moon, Commented Aug 18, 2014 at 14:20
Thank you. I can see that. It was a small mistake. But I'm still having issuing push the data to the table. — Davis
– Davis, Commented Aug 18, 2014 at 14:24
I would reccomend that you do all the array manipulations in the service/factory. That way you just call pickUpServ.add() and then use pickUpServ.get() in the resolve method for the route. — Cory Silva
– Cory Silva, Commented Aug 18, 2014 at 14:25
@CorySilva - Thank you for your suggestion. I like to try to sick with the add() in the controller. — Davis
– Davis, Commented Aug 18, 2014 at 14:34

Jesús Quintana · Accepted Answer · 2014-08-18 15:02:16Z

4

You are adding the new item, to other element outside the scope (inside the factory), must doing something like this:

        $scope.autoAddItem = function () {
            if (($scope.BarcodeValue + '').length == 8) {
                $scope.items.push({
                    "barcodeVal": $scope.BarcodeValue,
                    "courierType": "PICKUP",
                    "userName": "aspuser"
                });

                $scope.BarcodeValue = "";
            }
        };

If you want make all inside the factory must be something like this (and ignore the change above):

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function($rootScope, $http) {
    return {
        getPickUpList: function(callback) {
            var _this = this; 
            $http({
                method: 'POST',
                url: 'app/Service/CourierService.asmx/BarcodeList',
                data: {
                    "bardcodeVal": "",
                    "courierType": "PICKUP",
                    "userName": "aspuser"
                },
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
            })
            .success(function(data) {
            _this.items = data.d;
            callback(_this.items) //This gonna set to $scope the items in factory and angular  
                              //link the object items to $scope.items (Code not tested but must work)
            })
            .error(function(error) {
                console.log('Error - getPickUpList');
            });
        },
        items: [{
                    "bardcodeVal": "",
                    "courierType": "PICKUP",
                    "userName": "aspuser"
                }],
        add: function(item) {
            this.items.push(item);
            console.log(item);
        }
    };
}
]);

edited Aug 18, 2014 at 15:02

answered Aug 18, 2014 at 14:25

Jesús Quintana

1,81313 silver badges18 bronze badges

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

6 Comments

Davis Over a year ago

I'm getting a "TypeError: object is not a function" error with data(_this.items)

Davis Over a year ago

Can you provide another solution?

Jesús Quintana Over a year ago

fixed, a mistake passing the callback method. (Was been overriden for the function)

Davis Over a year ago

Still didn't work? Anyway, I figured it out... I used the $rootScope global var

Jesús Quintana Over a year ago

Is weird i have exactly the same code by a angular service to a chat application, and save the messages in a service object, and the scope works well. The only different is that my service have a getter to the object, something like this getItems: function(){return this.items}; Srry and lucky in your project.

|

Davis · Accepted Answer · 2014-08-18 15:08:40Z

Figured it out... I used the $rootScope.items = data.d; to resolve my issue. Thank you everyone for helping me!

Factory

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {

        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(function(data){
                    $rootScope.items = data.d;
                    console.log(data.d);
                }).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [],
            add: function(item) {
                $rootScope.items.push(item);
                console.log(item);
            }
        };
    }
]);

Controller

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {
            //$scope.items = pickUpServ.items;

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

Collectives™ on Stack Overflow

Push json data to existing array in angular js

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related