current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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>

share|improve this question
1  
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 Aug 18 '14 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 Aug 18 '14 at 14:24
1  
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 Aug 18 '14 at 14:25
    
@CorySilva - Thank you for your suggestion. I like to try to sick with the add() in the controller. –  Davis Aug 18 '14 at 14:34

2 Answers 2

up vote 1 down vote

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);
        }
    };
}
]);
share|improve this answer
    
I'm getting a "TypeError: object is not a function" error with data(_this.items) –  Davis Aug 18 '14 at 14:30
    
Can you provide another solution? –  Davis Aug 18 '14 at 14:42
1  
fixed, a mistake passing the callback method. (Was been overriden for the function) –  Jesús Quintana Aug 18 '14 at 15:03
    
Still didn't work? Anyway, I figured it out... I used the $rootScope global var –  Davis Aug 18 '14 at 15:09
1  
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. –  Jesús Quintana Aug 18 '14 at 15:20
up vote 0 down vote accepted

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 = "";
                }
            };
        }
    }
]);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.