Angular error : Expected array but received: 0

Question

I'm getting this error when I open up a model partial:

<form action="" novalidate name="newGroupForm">
    <div class="modal-body">
        <div class="row">
            <!-- SELECT THE NUMBER OF GROUPS YOU WANT TO CREATE -->
            <label>Select number of groups</label>
            <a class="btn" ng-click="newGroupCount = newGroupCount + 1" ng-disabled="newGroupCount == 10" ><i class="fa fa-plus-circle"></i></a>
            <input  class="groupCounter input-sm" ng-model="newGroupCount" type="number" min="1" max="10" disabled>
            <a class="btn" ng-click="newGroupCount = newGroupCount - 1" ng-disabled="newGroupCount == 1"><i class="fa fa-minus-circle"></i></a>
        </div>
        <br>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Group Name</th>
                    <th>Group Description (optional)</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="i in getNumber(newGroupCount) track by $index">
                    <td>{{$index+1}}</td>
                    <td>
                        <input class= input-sm type="text" required="true" autofocus="true" placeholder="Group name" ng-model="groupData.title[$index]">
                    </td>
                    <td>
                        <input class="form-control input-sm" type="textarea" ng-model="groupData.desc[$index]" placeholder="Group Description">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button class="btn btn-primary" type="submit" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button>
    </div>
</form>

The modal controller looks like this:

spApp.controller('newGroupCtrl',
    function newGroupCtrl($scope, $uibModalInstance, GroupService){

        $scope.groupData = {
            title: [],
            desc: []
        }

        $scope.newGroupCount = 1;

        $scope.getNumber = function(num) {
            //console.log(num);
            return new Array(num);
        }

        $scope.submit = function(){
            $uibModalInstance.close($scope.groupData);
        }
        $scope.cancel = function (){
            $uibModalInstance.dismiss('Cancelled group creation');
        };
    }
);

Every question I've seen refers to the use of filterbut I'm not using filter. The error repeats whenever I hit the increment button:

<a class="btn" ng-click="newGroupCount = newGroupCount + 1" ng-disabled="newGroupCount == 10" ><i class="fa fa-plus-circle"></i></a>

score 0 · Accepted Answer · answered Dec 21 '15 at 05:19

0

$scope.getNumber calls new Array(num), which will return an array of undefined values directly proportional to the value of newGroupCount.

For example:

new Array(5) // => [undefined, undefined, undefined, undefined, undefined]

Browsers don't handle that well, since it appears to be an empty array.

You're using ng-repeat in a way that it wasn't quite meant to be used. If I were you, I'd refactor to look something like this:

$scope.groups = [];

$scope.addGroup = function() {
  // implement this, and use it in your button that increments the groups
  $scope.groups.push(/* whatever */);
}

$scope.removeGroup = function() {
  // implement this to remove a group 
  $scope.groups.splice(/* whatever */);
}

Then in your HTML:

<tr ng-repeat="group in groups">
  <!-- display group info -->
</tr>

It may make your life easier here to work with angular (use it how it was intended) instead of fighting against how ng-repeat is meant to work.

The data is generally meant to be in the form of a collection (i.e. [{},{},{}]). Formatting it as such will make it easier for you. See the docs for ng-repeat.

answered Dec 21 '15 at 05:19

Josh Beam

19,292
3
45
68

I understand the issue with the `undefined` array, makes sense. What I'm trying to accomplish is a bit different from your answer. You're removing or adding groups from an array, I'm just trying to set the number of new groups to be create. So starting of with 1 and going up and down from there which I accomplish with `ng-click`. Is there some else I should be using that's ng-repeat in this case? – Batman Dec 21 '15 at 05:27
I find it pretty annoying I need a collection for ng-repeat. All I want to do is say repeat this table row X number of times. I wrote this about a year ago this is where I got the implementation I'm using http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array I updated Angular to 1.4.8 which is causing the issue. Just a little background. – Batman Dec 21 '15 at 05:28
@Batman, You can do the same thing by treating the data as a collection of objects, rather than as an object that contains arrays of data that are meant to describe your UI. But, yes, I understand, what you're trying to do is *imperatively* describe in a for-loop how many "new group" components should exist. Since the Angular paradigm is to operate on *collections*, this lends itself to a more *declarative* approach, which means the UI will simply be a function of whatever data happens to exist. – Josh Beam Dec 21 '15 at 05:30
You can still track each group by index, but you should be operating on them as though they are discreet components. – Josh Beam Dec 21 '15 at 05:32
I ended up doing this `i in _.range(0, newGroupCount) track by $index` and just getting rid of the `$scope.getNumber` function. That way I'm definitely returning an array – Batman Dec 21 '15 at 06:30

Angular error : Expected array but received: 0

1 Answers1