Cannot read property in angular js

Question

This is my script file

app.controller('userController', function PostController($scope, userFactory) {
$scope.users = [];
        $scope.user = { items : [] };
        $scope.editMode = false;

        $scope.addItem = function () {

                $scope.user.items.push({
                    Name: $scope.newItemName,
                    Value: $scope.newItemValue
                });
            };

         $scope.deleteItem = function (index) {
                 $scope.user.items.splice(index, 1);
             };}

This is my html file.

<div class="form-group">
    <ul class="nav">
       <label for="title" class="col-sm-2 control-label">Items</label>
       <div class="col-sm-10">

       <input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemName" required placeholder="name of new item...">
       <input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemValue" required placeholder="name of new item...">
           </div>
       <button ng-click="addItem()">Add Me</button>
       <li ng-repeat="item in user.items">
           <a href="#">{{item.Name}}</a>  <a ng-click="deleteItem($index)" class="delete-item">x</a>
       </li>
    </ul>
</div>

When I Click add me button i get an error as

 TypeError: Cannot read property 'items' of undefined

I cant figure out the error and why it occurs. Please help me I'm new to angular js

Your $scope.user = null; should be comething else like $scope.user = {}; — Emanuel Ralha
– Emanuel Ralha, Commented Jun 22, 2015 at 15:55
its because your "items" object doesn't exist OP. you're trying to loop through variable that is NULL — Nocturnal Penguin
– Nocturnal Penguin, Commented Jun 22, 2015 at 15:59

krivtom · Accepted Answer · 2015-06-22 15:54:58Z

3

The error occurs because your user property is null:

$scope.user = null;

Change it to an actual object which ideally has items property:

$scope.user = { items : [] };

answered Jun 22, 2015 at 15:54

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

squiroid Over a year ago

hehe you beat me by few seconds :D +1 for you :)

krivtom Over a year ago

@FeroozKhan are you sure you updated everything? Here is a link to a working plunker

krivtom Over a year ago

Is it just me, or I'm not getting any errors in the codepen link that you provided?

squiroid · Accepted Answer · 2015-06-22 15:56:29Z

0

Simple where is items if you have $scope.user = null;

so simple do one thing add

$scope.user = {items:[]};

and then use $scope.user.items.push(data)

answered Jun 22, 2015 at 15:56

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

1 Comment

Ferooz Khan Over a year ago

i have editing my script file the same error occurs.. @squiroid

Collectives™ on Stack Overflow

Cannot read property in angular js

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related