AngularJS throws unknown error

Question

My code is like this

<body>
<div>
    <table ng-app='myApp'>
        <thead>

        </thead>
        <tbody ng-controller="MainCtrl">
            <tr ng-repeat="prdElement in palletElement">

                <td>
                    {{prdElement.name}}
                </td>

                <td>
                    {{prdElement.itemId}}
                </td>
                <td>
                    {{prdElement.shipmentId}}
                </td>
                <td>
                    {{prdElement.itemCode}}
                <td>
                    {{prdElement.description}}
                </td>

                <td>
                    {{prdElement.handlingUnit}}
                </td>
                <td>
                    {{prdElement.weight}}
                </td>
                <td>
                    {{prdElement.class}}
                </td>
                <td>
                    {{prdElement.lenght}}
                </td>

                <td>
                    {{prdElement.width}}
                </td>
                <td>
                    {{prdElement.height}}
                </td>
                <td>
                    {{prdElement.flag}}
                </td>

                <td>
                    <input type="text" ng-model="prdElement.quantity" placeholder=" Code" required />

                </td>
                <td>

                    <button ng-click="newPrdItem( prdElement,$event)">Submit</button>

                </td>
            </tr>
            <tr>

            </tr>
        </tbody>

    </table>
</div>

(function () {
    angular.module('myApp', []).controller('MainCtrl', function ($scope) {

        var counter = 0;

        $scope.palletElement = [{
            name: 'Pallet 1',
            itemId: '284307',
            shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
            itemCode: '',
            description: 'Bicycle parts - frame',
            quantity: '31',
            handlingUnit: 'CTN',
            weight: '613.04',
            class:'',
            lenght: '102',
            width: '42',
            height: '61',
            flag:'P'

        }, {
            name: 'Pallet 2',
            itemId: '284308',
            shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
            itemCode: '',
            description: 'Bicycle parts - fork',
            quantity: '22',
            handlingUnit: 'CTN',
            weight: '242.99',
            class: '',
            lenght: '75',
            width: '34',
            height: '18',
            flag: 'P'
        }]

        $scope.newPrdItem = function (prdElement, $event) {
            counter++;
            alert(prdElement.name);
            prdElement.push({
                name: prdElement.name,
                itemId: prdElement.itemId,
                shipmentId: prdElement.shipmentId,
                itemCode: prdElement.itemCode,
                description: prdElement.description,
                quantity: prdElement.quantity,
                handlingUnit: prdElement.handlingUnit,
                weight: prdElement.weight -10,
                class: prdElement.class,
                lenght: prdElement.lenght,
                width: prdElement.width,
                height: prdElement.height,
                flag: prdElement.flag,
            });

        }

    });
}());

All looks okay to me, But this throws an unknown error at button click

TypeError: undefined is not a function at Scope.$scope.newPrdItem

Fiddle

sma · Accepted Answer · 2014-10-08 13:33:33Z

You are treating prdElement as an array by issuing a call to push on it, but that is actually an object passed from the view:

This line is what's failing.

prdElement.push({

I would create a separate array to track the items being clicked

var items = [];
$scope.newPrdItem = function (prdElement, $event) {
            counter++;
            alert(prdElement.name);
            items.push({
                name: prdElement.name,
                itemId: prdElement.itemId,
                shipmentId: prdElement.shipmentId,
                itemCode: prdElement.itemCode,
                description: prdElement.description,
                quantity: prdElement.quantity,
                handlingUnit: prdElement.handlingUnit,
                weight: prdElement.weight -10,
                class: prdElement.class,
                lenght: prdElement.lenght,
                width: prdElement.width,
                height: prdElement.height,
                flag: prdElement.flag,
            });

        }

kasoban · Accepted Answer · 2014-10-08 13:33:10Z

0

You can only .push() to an array. But your passed parameter prdElement is an Object, not an Array, thus prdElement.push() is not a defined function!

What you most likely want to push to instead is the palletElement.

answered Oct 8, 2014 at 13:33

kasoban

2,16717 silver badges24 bronze badges

Collectives™ on Stack Overflow

AngularJS throws unknown error

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related