Monitoring changes in an array of objects using AngularJS's $watch function

Exploring the world of AngularJS, I'm on a quest to solve a challenging issue efficiently.

Imagine having an array of objects like this:

var list = [
{listprice: 100, salesprice:100, discount:0},
{listprice: 200, salesprice:200, discount:0},
{listprice: 300, salesprice:300, discount:0},
];

Now, picture this: The sales prices can be edited by the user or altered by backend processes. What I need is to closely monitor every sale price for any changes - whether triggered from the UI or through backend operations - and reflect those adjustments by updating the corresponding discounts for each object accordingly.

While contemplating the best approach, I pondered over utilizing $watch. However, I find myself at a crossroads in understanding how exactly to leverage it to bind to individual sales prices within the array and facilitate the necessary function that modifies the associated discount value.

Answer №1

assuming arr is within your $scope, you can monitor changes like this:

$scope.$watch('arr', function(newVal, oldVal){
    console.log('modified');
},true);

it's crucial to include the final argument of true for thorough observation. The third parameter is discretionary and pertains to objectEquality $rootScope.Scope#$watch

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

Retrieving ng-repeat object in Angular

How can I retrieve the current object from an ng-repeat on ng-click without using $index? The $index method is giving me the wrong index due to my use of orderBy. Ideally, I would like to be able to click on the object (thumbnail) and have $scope.activePer ...

Material UI button text not receiving props

Within my application, I have a situation where I utilize data attributes on buttons to gather specific contextual information in the modal that is triggered by clicking the button. This functionality depends on accessing the data attributes through e.targ ...

Undefined is returned after resolving - React - JavaScript API

Learning React and JavaScript is a bit challenging for me, especially when it comes to understanding how Promises and resolving work. I'm currently working on an API to log into an application with an internal SQL database. The queries are functionin ...

What is the best method for determining the ID or class of a div element dynamically?

My issue involves a scrolling div that dynamically loads data using ajax and json from an API as you scroll horizontally. Currently, I have multiple scrolling divs on a single page. The problem arises when I need to inform jQuery about the ID of the div b ...

Is your AngularJS $scope.variable out of alignment with the view?

I'm feeling a bit puzzled by this issue because I can't seem to replicate it in Plunker, but it's occurring in my actual project. Here is the Plunker link I created. I am attempting to monitor the scope variable searchString, and while it f ...

Convert an array to a string using a JavaScript function

I am encountering an issue with the code below: Every time I pass the Array to "track," I encounter an error. It seems like there might be a mismatch between passing an object and a string as input, but I am uncertain and unable to verify. for (var i = 0; ...

Do we need to include href in the anchor tag?

Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height ...

Utilizing JavaScript to manage sections within a dropdown menu

When dealing with this particular HTML code, there is a feature where a list item includes options such as all, a, b, c, and d. If the user selects 'All', it should restrict them from choosing any other items. However, if they do not choose &apos ...

Exploring jQuery Ajax: A Guide to Verifying Duplicate Names

When I apply the blur function to a textbox to check for duplicate names using jQuery AJAX, it works perfectly. Here is the code snippet: function checkForDuplicate(data){ $.post("test.php", {name: data}, function (data){ if(data){ ...

What is the best way to manage div visibility and sorting based on selections made in a select box?

Explaining this might get a bit confusing, but I'll do my best. In my setup, I have two select boxes and multiple divs with two classes each. Here is what I am trying to achieve: When an option is selected, only the divs with that class should be ...

Tips for gathering an array of checkboxes within a dynamic array of items using Vue.js and Vuetify

I am currently working on a role permission system where I have defined a resource array containing items that users can access, as well as checks representing the permissions for each resource. My goal is to dynamically assign a role with these resources ...

Is it really necessary to still think poorly of JavaScript in 2011?

Here's an intriguing question for you. I've tested out a variety of popular websites, including Facebook, and I've noticed that many features still work perfectly fine even when JavaScript is disabled. People always used to say that JavaScr ...

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Currently, I am facing a challenge using socket.io v2.0.3 in my node.js server as I am unable to retrieve the client's IP address. Although there are several suggestions and techniques on platforms like stackoverflow, most of them are outdated and no ...

Deactivating Node.js files in vsCode for client-side JavaScript files

I'm facing a major challenge when it comes to coding with JavaScript. I have a JavaScript file that is using Node.js, which means I am unable to manipulate the DOM elements. Take this code snippet for example: var form = document.getElementsByClassNa ...

Having trouble with jQuery focus not functioning properly?

I've been attempting to implement a focus function on a specific input in order to display a div with the class name .search_by_name when focused. However, I'm encountering issues and would appreciate it if someone could review my code to identif ...

Using keys dynamically fetched from a JSON array file to enhance d3js functionality

I am looking to dynamically retrieve keys from an external JSON array and utilize them in d3js functions to create bar charts. Below is the JSON code provided: [ { "Interns": 5, "Projects": 10, "Time":"Jan" }, { "Interns": 16, "Pr ...

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

Contact a relaxation service periodically to pause its operation

To continuously check the status of a webservice, I need to make a REST call every x seconds (3000 ms) until the desired result is obtained or until it has been attempted 12 times. The call should also stop once the expected status is received: function m ...

Is it possible to resize AngularJS components to fit their parent elements

I am working with a set of LI elements within a document that require their width to be adjusted based on the number of items and the width of the container. How can I access the width of the parent container from this directive? var MyApp = angular.mod ...