Initially, I have an array structured like this:
[{
name: 'a',
color: 'red',
children:
[{
name: 'a1',
color: 'red',
children:
[{
name: 'a11'
}]
},
{
name: 'a2'
color: 'red',
}]
},
{
name: 'b'
color: 'red',
}]
After some user interaction on the frontend, I receive an updated array structure:
[{
name: 'a'
color: 'red',
children:
[{
name: 'a1'
color: 'red',
},
{
name: 'a2'
color: 'red',
children:
[{
name: 'a21',
color: 'yellow'
}]
}]
},
{
name: 'new'
color: '',
},
{
name: 'a11'
color: 'red',
},
{
name: 'b'
color: 'red',
}]
This update includes objects that have moved and new objects. The challenge is merging these changes back into the original array without altering the unchanged objects.
Since the array is rendered using Angular, a simple replacement of the original array with the updated one can lead to performance issues, especially with large arrays.
I attempted to use the merge function in lodash, but encountered issues with object properties conflicting, such as the object "new" inheriting the color "red" from the object "b".
What would be the most efficient approach to handle this scenario?