Push Json Data To Existing Array In Angular Js

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 th

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

Solution 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 Dataif ($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 = "";
                }
            };
        }
    }
]);