Data not getting updated in array of objects when the value in scope variable changes

Question

I have an array of objects which is created on a button click. Now I have a scope variable that is assigned a default value.

This scope variable is part of textbox so now when user updates the textbox value that value is not getting automatically updated in all the records in bonus property of $scope.job.referralsrecords.

Code:

$scope.job.defaultBonus = 65;
function addNewReferrals{
  $scope.job.referrals.push({
                           id: null,
                           bonus: $scope.job.defaultBonus
                        });
}

Can anyone tell me why is this happening and how do I update all bonus property in $scope.job.referrals when the $scope.job.defaultBonus gets change?

do you want to update all records in $scope.job.referrals and set each one to have a bonus property that is $scope.job.defaultBonus? — Kinglish
– Kinglish, Commented Jun 10, 2021 at 22:29

Kinglish · Accepted Answer · 2021-06-10 22:49:57Z

1

Listening for a change from an input field. You need ng-model and ng-change. ng-model binds the input value to the scope object.

<input ng-model='job.defaultBonus' ng-change='addNewReferrals()' />

You can iterate the array with map() and use the {...} spread operator to update the record.

function addNewReferrals() {
      $scope.job.referrals = $scope.job.referrals.map(el => ({ ...el,
        bonus: $scope.job.defaultBonus
      }))
    }

I set up an object called $scope for this snippet to demonstrate, but you would just use the angular property $scope.

const $scope = {
  job: {
    defaultBonus: 0,
    referrals: [{
        id: 1,
        name: "John"
      },
      {
        id: 2,
        name: "Fred"
      },
      {
        id: 3,
        name: "Mary"
      }
    ]
  }
}

$scope.job.defaultBonus = 65;

function addNewReferrals() {
  $scope.job.referrals = $scope.job.referrals.map(el => ({ ...el,
    bonus: $scope.job.defaultBonus
  }))
}

addNewReferrals();

console.log($scope);

edited Jun 10, 2021 at 22:49

answered Jun 10, 2021 at 22:34

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

8 Comments

I Love Stackoverflow Over a year ago

But the question is how do I know when the value of $scope.job.defaultBonus is changed? that's the issue. When do I call the code to update the $scope.job.referrals for the newly changed $scope.job.defaultBonus?

I Love Stackoverflow Over a year ago

So I have to call the ng-change event purposely to update the $scope.job.referrals. I was sort of avoiding it because I think angularjs scope variable changes should automatically updates the value but I guess it doesn't work for Array of objects.

Kinglish Over a year ago

Well, it does automatically update the $scope.job.defaultBonus value. That is automatic by virtue of ng-model. I thought you ALSO wanted to update the referrals array items with the value, in which case the explicit ng-change function is there.

Kinglish Over a year ago

If there's no calculation involved, then instead of updating the $scope.job.referrals array item by item, you could just always reference $scope.job.defaultBonus ... I wasn't sure what your use case was

I Love Stackoverflow Over a year ago

I have to update the referrals because that array is passed to an API which then updates the value in database. What do you think about using $watch in this case?

|

Collectives™ on Stack Overflow

Data not getting updated in array of objects when the value in scope variable changes

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related