Adding property to each object of an array independently with AngularJS angular.extend

Question

I have an existing array with an object and several properties created on a first step. It is created by the following function:

$scope.recordlist = extractRecordJSONFromLocalStorage();
$scope.addRecord = function () {
    $scope.recordlist.push(
            {
                date: $scope.dateJson, 
                time: $scope.time, 
                car: $scope.carList.code, 
                driver: $scope.driverList.name,
                from: $scope.locationList.place,
                destination: $scope.locationList2.place, 
                pax: $scope.paxList
            }
        );

    $scope.custom = $scope.custom === false ? true: false;
    $scope.carList = 0;
    $scope.driverList = 0;
    $scope.locationList = 0;
    $scope.locationList2 = 0;
    jsonToRecordLocalStorage($scope.recordlist);
};

It results in the following array:

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3"
}]

What I'm trying to do is to add another property into the existing object on the next step with ng-click. I've tried with the following function but it doesn't seem to work.

$scope.insertRecord = function (recordlist) {

    var arrival = { 'arrival' : moment().format("HH.mm") }
    console.log(arrival)
    angular.extend($scope.recordlist, arrival)


    jsonToRecordLocalStorage($scope.recordlist);
}

The end result I'm looking for is the following:

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3",
  "arrival":"23.10"
}]

Maybe another thing to take also into consideration is that in the app it exists the possibility of having many different objects being listed, some that have the arrival property already defined, but some that will have it later in time.

Any pointers?

EDIT

The 2 solutions I got worked but didn't accomplish what I am looking for, so probably I was unclear on what I am trying to do.

I am saving a collection of objects into an array, each object has a property arrival that will be defined on a second step.

So first I create an array of objects like this:

[
 {
  "date":"2014 10 16",
  "time":"20.42",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3",
 },
 {
  "date":"2014 10 16",
  "time":"20.12",
  "car":"319",
  "driver":"Seb",
  "from":"C",
  "destination":"D",
  "pax":"4",
 },
 {
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"G",
  "destination":"A",
  "pax":"1",
 }
]

This is displayed on the view in a table-like layout. Each row contains the data from an object, and initially doesn't include the property arrival because the app tracks car movements and the car has not arrived to destination.

Each row has also a button triggering insertRecord(), that defines the arrival time and its supposed to include the arrival property into each object, independently.

So in this example, maybe the car from the second object arrived, and I want to be able to add the arrival property only for this particular object, leaving the array like this:

[
 {
  "date":"2014 10 16",
  "time":"20.42",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3"
 },
 {
  "date":"2014 10 16",
  "time":"20.12",
  "car":"319",
  "driver":"Seb",
  "from":"C",
  "destination":"D",
  "pax":"4",
  "arrival":"20.35"
 },
 {
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"G",
  "destination":"A",
  "pax":"1"
 }
]

The 2 proposed solutions from dfsq allowed me to both define arrival for the first object of the array, or for all the objects at once, but not for each object separately.

This is the HTML code where insertData is called:

<div class="row msf-row" ng-repeat="record in recordlist | filter: search">
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-1">{{record.driver}}</div>
      <div class="col-md-3">{{record.from}}</div>
      <div class="col-md-3">{{record.destination}}</div>
      <div class="col-md-1">{{record.pax}}</div>
      <div class="col-md-1">
           <button ng-click="insertRecord()" ng-show="!record.arrival"><i class="fa fa-cog"></i></button>{{record.arrival}}
      </div>
</div>   

Being so, any hints on how to get there?

Answer 1

According to your code $scope.recordlist is an array of objects. So you probably want this:

angular.extend($scope.recordlist[0], arrival);

UPD To update every object in the array you can use map method:

$scope.recordlist = $scope.recordlist.map(function(obj) {
    return angular.extend(obj, arrival);
});

Answer 2

If understand your question correctly you want to update a single record by adding arrival. Pass the record to insertRecord:

<button ng-click="insertRecord(record)" ng-show="!record.arrival">

There you can add the property to the respective record:

$scope.insertRecord = function (record) {
  record.arrival =  moment().format("HH.mm");