In my application, I am working with a data object called fulldata, which consists of an array of objects.
fulldata = [
{'key': 'abc', values: {.....},....},
{'key': 'efg', values: {.....},....},
{'key': 'hij', values: {.....},....},
.....]
This fulldata is utilized for displaying charts using D3, where the keys of the objects act as legends for the chart. Whenever a user interacts with the chart, new objects are added to fulldata. In cases where only the key changes, I need to update the legend, whereas if the values property changes, the entire chart needs to be re-rendered accordingly.
I initially attempted deep watching the entire fulldata object and updating just the legend based on a condition when the key changes. However, this method proved to be inefficient due to the large dataset within the values property resulting in slow performance.
An alternative approach I tried was creating a separate function getKeys() that retrieves all the keys for monitoring purposes, but encountered an error stating "Error: 10 $digest() iterations reached. Aborting!"
If anyone has faced a similar challenge or has suggestions for achieving better performance without resorting to deep watching, I would greatly appreciate your advice. Thank you.