Scope variable error: Cannot read property ... of undefined

Question

in my code i have a table and i want to fill a form with the row i clicked. The table:

<table class="table table-striped">
<thead>
<tr>
    <th>#</th>
    <th>project</th>
    <th>start</th>
    <th>end</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in myBookingsList" ng-click="bookingClicked(booking)">
    <td>{{$index + 1}}</td>
    <td>{{booking.usersProjects.project.name}}</td>
    <td>{{booking.start | date:'yyyy-MM-dd HH:mm:ss' }}</td>
    <td>{{booking.end | date:'yyyy-MM-dd HH:mm:ss' }}</td>
</tr>
</tbody>

here is the function for ng-click:

$scope.bookingClicked = function(booking){
    $scope.newBooking = {};
    $scope.newBooking.project = booking.usersProjects.project.name;
    $scope.newBooking.id = booking.id;
    $scope.newBooking.startDate = $filter('date')(booking.start, "yyyy-MM-dd");
    $scope.newBooking.startTime = new Date(booking.start);
    $scope.newBooking.endDate = $filter('date')(booking.end, "yyyy-MM-dd");
    $scope.newBooking.endTime = new Date(booking.end);
};

The problem is the 2nd line where i get

TypeError: Cannot read property 'project' of undefined

So what is the problem here? Another part of the app takes the data from from and submits it. This is working fine and there i have

$scope.newBooking = {};
//timepicker values must be initialized
$scope.newBooking.startTime = new Date();
$scope.newBooking.endTime = new Date();

Here is an example for booking object that is fed to function:

{
    "id": 50,
    "self": "http://localhost:8080/timetracker-backend/timetracker/booking/50",
    "start": 1434103331000,
    "end": 1434110531000,
    "usersProjects": {
        "id": 43,
        "self": "http://localhost:8080/timetracker-backend/timetracker/usersprojects/43",
        "user": {
            "id": 1,
            "self": "http://localhost:8080/timetracker-backend/timetracker/user/1",
            "name": "timetrackerAdmin",
            "role": "ADMIN"
        },
        "project": {
            "id": 42,
            "self": "http://localhost:8080/timetracker-backend/timetracker/project/42",
            "name": "project four",
            "description": "description p4"
        }
    }
}

This looks similar to me??

what are the contents of myBookingsList? It seems that the usersProjects property is undefined for the booking you are clicking — Alen Genzić
– Alen Genzić, Commented Jun 19, 2015 at 13:29
no i debugged into this line and the right side yields the correct value! added example object — dermoritz
– dermoritz, Commented Jun 19, 2015 at 13:33
You could try passing just the booking ID back to the controller and then fetching it from your data store — Alen Genzić
– Alen Genzić, Commented Jun 19, 2015 at 13:39
thats bad - the complete object is there - as described above. and the problem is not the data but the scope variable. Why $scope.newBooking.project is not working?? — dermoritz
– dermoritz, Commented Jun 19, 2015 at 13:43
I know, it's not the best for performance. Sorry, can't help you any further :) — Alen Genzić
– Alen Genzić, Commented Jun 19, 2015 at 13:44

PavanAsTechie · Accepted Answer · 2015-06-23 08:47:03Z

1

In $scope.newBooking = {};

there is no object name project so it is showing console error, you create an empty object in your answer as

 $scope.newBooking.project = {};

it means

$scope.newBooking= {
project : {} 
}

you line works as above code, now $scope.newBooking has or know above project object so, it works fine

edited Jun 23, 2015 at 8:47

answered Jun 19, 2015 at 13:58

PavanAsTechie

3323 silver badges14 bronze badges

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

3 Comments

PavanAsTechie Over a year ago

Your question was not clear. you need to fill the form or json array

dermoritz Over a year ago

the "booking" fed to function comes from "booking in myBookingsList". I want to fill an empty form with one item from list - the one clicked. the left side are the empty form the right side are the values to be filled into the form. but as i said in my answer if i add $scope.newBooking.project = {}; all is working fine - but why?

PavanAsTechie Over a year ago

In $scope.newBooking = {}; there is no object name project so it is showing that error, you create an empty object $scope.newBooking.project = {}; it means $scope.newBooking= {project : {} } you line works as this, now $scope.newBooking has project = {} in it so, it works fine

dermoritz · Accepted Answer · 2015-06-19 13:50:57Z

0

Accidentally i found a solution. It is working if i add $scope.newBooking.project = {};

so the function is now

$scope.bookingClicked = function(booking){
    $scope.newBooking = {};
    $scope.newBooking.project = {};
    $scope.newBooking.project = booking.usersProjects.project.name;
    $scope.newBooking.id = booking.id;
    $scope.newBooking.startDate = $filter('date')(booking.start, "yyyy-MM-dd");
    $scope.newBooking.startTime = new Date(booking.start);
    $scope.newBooking.endDate = $filter('date')(booking.end, "yyyy-MM-dd");
    $scope.newBooking.endTime = new Date(booking.end);
};

But whoever can me tell why this is only working with this additional line will get accepted.

answered Jun 19, 2015 at 13:50

dermoritz

13.1k28 gold badges117 silver badges209 bronze badges

3 Comments

Joao Leal Over a year ago

that makes no sense... :)

dermoritz Over a year ago

the additional problem is: i am absolute angularjs/js beginner. But now it is working fine.

Joao Leal Over a year ago

The problem was either because you didn't have this line $scope.newBooking = {}; or because booking.usersProjects was undefined when you were trying to call $scope.newBooking.project = booking.usersProjects.project.name;

Collectives™ on Stack Overflow

Scope variable error: Cannot read property ... of undefined

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related