Execute a function when the value of a property in an array of objects is modified

Question

Execute a function when the value of a property in an array of objects is modified

Here is an example of my array object.

$scope.arr = [{"A":"a","B":"b"},{"A":"c","B":"d"},{"A":"e","B":"f"},{"A":"g","B":"h"}];

I am looking to trigger a function whenever the value of property "A" changes, specifically to count all instances where "A" has a non-empty value. The following scenarios should trigger this function:

If the value of "A" changes in a newly added object to the array.
If an object is removed where the property "A" contains a value.
If a value is added to an empty "A" in an object.
If an existing value in "A" is emptied in an object.

I have looked into Angular watch documentation and understand that it may be a possible solution. However, I am struggling with how to watch for the specific property("A") within any object of the array.

Any help on this matter would be greatly appreciated.

If there is no viable solution in Angular, I am also open to alternative solutions using underscore.js.

javascript angularjs arrays underscore.js

Answer 1

Answer №1

When working with AngularJS, you can utilize the $scope.$watch function:

$scope.$watch("arr",function (newVal,oldVal){
    console.log("The value has changed from "+oldVal+" to "+newVal);
},true);

However, this approach can be quite costly.

For pure Javascript, there exists an unconventional implementation known as object.watch which is sourced from here

/*
 * object.watch polyfill
 *
 * 2012-04-03
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

// object.watch
if (!Object.prototype.watch) {
    Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop, handler) {
            var
              oldval = this[prop]
            , newval = oldval
            , getter = function () {
                return newval;
            }
            , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
            }
            ;

            if (delete this[prop]) { // can't watch constants
                Object.defineProperty(this, prop, {
                      get: getter
                    , set: setter
                    , enumerable: true
                    , configurable: true
                });
            }
        }
    });
}

// object.unwatch
if (!Object.prototype.unwatch) {
    Object.defineProperty(Object.prototype, "unwatch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop) {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}

Answer 2

When working with AngularJS, you can utilize the $scope.$watch function:

$scope.$watch("arr",function (newVal,oldVal){
    console.log("The value has changed from "+oldVal+" to "+newVal);
},true);

However, this approach can be quite costly.

For pure Javascript, there exists an unconventional implementation known as object.watch which is sourced from here

/*
 * object.watch polyfill
 *
 * 2012-04-03
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

// object.watch
if (!Object.prototype.watch) {
    Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop, handler) {
            var
              oldval = this[prop]
            , newval = oldval
            , getter = function () {
                return newval;
            }
            , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
            }
            ;

            if (delete this[prop]) { // can't watch constants
                Object.defineProperty(this, prop, {
                      get: getter
                    , set: setter
                    , enumerable: true
                    , configurable: true
                });
            }
        }
    });
}

// object.unwatch
if (!Object.prototype.unwatch) {
    Object.defineProperty(Object.prototype, "unwatch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop) {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}

Answer 3

Answer №2

To achieve this functionality, you can utilize the $watch method.

For example:

$scope.$watch("arr",function (newVal,oldVal){
     angular.forEach(newVal,function (val,index){
         if(oldVal.indexOf(val)== -1){
                 //your code
              }
        }) 

},true);

The third parameter 'true' in this case is used for performing a deep check.

Answer 4

To achieve this functionality, you can utilize the $watch method.

For example:

$scope.$watch("arr",function (newVal,oldVal){
     angular.forEach(newVal,function (val,index){
         if(oldVal.indexOf(val)== -1){
                 //your code
              }
        }) 

},true);

The third parameter 'true' in this case is used for performing a deep check.

Execute a function when the value of a property in an array of objects is modified

Answer №1

Answer №2

Similar questions

Improving the efficiency of ajax/javascript is necessary as the delay in data retrieval is too significant. There must be a more effective approach to this

Tips for efficiently serving a static file without triggering a disk read

Is it possible to define a variable within a JavaScript function and then access it outside of the function?

Using PHP to convert JSON data into the Google Chart API

Can an object serve as a property name for another object?

Navigating through a vue array with the assistance of index

Is it possible to merge two jQuery functions into a single one?

Guide to designing a personalized mesh in THREE.JS

Why is it that a website is loading at a snail's pace on Angular?

How to incorporate a delay in ng-repeat using AngularJS

grid causing images to display incorrectly in incorrect positions

Is it possible for Node.js to manipulate video files?

Error: The function `res.status` is unsupported

An error occurred with the authorization headers when attempting to retrieve the requested JSON

Merging scripts to minimize HTTP requests - The Takeover of the Body Swappers

Develop a form that relies on multiple requests made through AJAX

Encountering a Build Error in Angular 6 when running the command "ng build --prod"

Why won't my Java servlet code execute?

What is the importance of using mutations, setters, and getters for effectively managing state?

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server