Push json data to existing array in angular js

All we need is an easy explanation of the problem, so here it is.

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>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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);
        }
    };
}
]);

Method 2

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply