Im trying to push a data value to an array in AngularJS, with .push();, but I always get this error message:

Error: $scope.test.push is not a function

Here is my HTML:

<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">

    <div class="page-header"><h1>Testar</h1></div>
    <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Sträcka</th>
            <th>Tid</th>
         </tr>
    </thead>
        <tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td></tr>
    </table>

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
        <div class="form-group" ng-class="{'has-error' : userForm.stracka.$invalid && !userForm.stracka.$pristine, 'has-success' : userForm.stracka.$valid }">
            <label>Sträcka(m):</label>
            <input type="text" name="stracka" class="form-control" ng-model="form.stracka" required>
            <p ng-show="userForm.stracka.$invalid && !userForm.stracka.$pristine" class="help-block">Fel sträcka</p>
        </div>

        <div class="form-group" ng-class="{'has-error' : userForm.tid.$invalid && !userForm.tid.$pristine, 'has-success' : userForm.tid.$valid && !userForm.tid.$pristine}">
            <label>Tid:</label>
            <input type="text" name="tid" class="form-control" ng-model="form.tid" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.tid.$error.minlength" class="help-block">För kort</p>
            <p ng-show="userForm.tid.$error.maxlength" class="help-block">För långt</p>

        </div>
        <button type="submit" class="btn btn-primary">Lägg till</button>
    </form>
</div>
</div>
</div>

And here is my controller:

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            /*testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });*/
            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                $scope.test.push($scope.form);

            }).error(function(data, status) {

            });
        }
    };
});

Can anyone help me and explain why I get this message?

Im trying to push a data value to an array in AngularJS, with .push();, but I always get this error message:

Error: $scope.test.push is not a function

Here is my HTML:

<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">

    <div class="page-header"><h1>Testar</h1></div>
    <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Sträcka</th>
            <th>Tid</th>
         </tr>
    </thead>
        <tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td></tr>
    </table>

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
        <div class="form-group" ng-class="{'has-error' : userForm.stracka.$invalid && !userForm.stracka.$pristine, 'has-success' : userForm.stracka.$valid }">
            <label>Sträcka(m):</label>
            <input type="text" name="stracka" class="form-control" ng-model="form.stracka" required>
            <p ng-show="userForm.stracka.$invalid && !userForm.stracka.$pristine" class="help-block">Fel sträcka</p>
        </div>

        <div class="form-group" ng-class="{'has-error' : userForm.tid.$invalid && !userForm.tid.$pristine, 'has-success' : userForm.tid.$valid && !userForm.tid.$pristine}">
            <label>Tid:</label>
            <input type="text" name="tid" class="form-control" ng-model="form.tid" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.tid.$error.minlength" class="help-block">För kort</p>
            <p ng-show="userForm.tid.$error.maxlength" class="help-block">För långt</p>

        </div>
        <button type="submit" class="btn btn-primary">Lägg till</button>
    </form>
</div>
</div>
</div>

And here is my controller:

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            /*testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });*/
            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                $scope.test.push($scope.form);

            }).error(function(data, status) {

            });
        }
    };
});

Can anyone help me and explain why I get this message?

• javascript
• angularjs
• syntax-error

• check isArray($scope.test) is true or not. – Mritunjay Commented Jul 17, 2014 at 12:14
• What is being returned from '/nao/test/test/? Is data.data actually an array? – RobH Commented Jul 17, 2014 at 12:15
• 1 Can you make a quick plunk demonstrating the issue? Because ThomasP1998's answer should work. – Ronald91 Commented Jul 17, 2014 at 13:10

3 Answers 3

Try doing this:

$scope.test = [];
$scope.test.push($scope.form);

Try this:

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            /*testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });*/

            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                $scope.test = $scope.test || []; 
                $scope.test.push($scope.form);

            }).error(function(data, status) {

            });
        }
    };
});

create an array first - $scope.usermsg = [];

then push value in it - $scope.usermsg.push($variable);