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??

Answer 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

Answer 2

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.