Polymer - notify that a object.property changed in a array for DOM - polymer

Question

In Polymer 1.*, I have a dom repeat. The obj.property is not updating in the DOM when I mutate array itemsCollection.
I tried 'this.notifyPath(itemCollection.${i}.value)' after 'this.set(itemCollection.${i}.value, existing.value);' but it did not update in the DOM.
Am I supposed to use this.notifySplices instead? And if so, how would I use it after this.set(itemCollection.${i}.value, existing.value);?
_populateAlerts: function(existingValues) {
this.itemCollection.forEach((question, i)=> {
const existing =
existingValues.find(value => value.name === question.name);
this.set(`itemCollection.${i}.picklist_value_id`,
existing.picklist_value_id);
this.set(`itemCollection.${i}.value`, existing.value);
});
},

Answer 1

this.notifyPath is never needed if you use this.set, and should probably only be used if another framework sets the variable.
It's weird code, with cubic looping, and setting subproperties in itemCollection, while looping through said array, through Polymer methods.
Anyway, I wonder if there is an Array reference problem. Where existingValues = itemCollection, so every time existingValues changes, itemCollection is changed as well but in a way that doesn't update the DOM. This means that itemCollection tries to set itself to an already existing value when being set through this.set, hence not updating the DOM through dirty checking.
A simple solution could be to just set itemCollection with a copy of itself.
_populateAlerts: function(existingValues) {
this.itemCollection.forEach((question, i)=> {
const existing =
existingValues.find(value => value.name === question.name);
this.set(`itemCollection.${i}.picklist_value_id`,
existing.picklist_value_id);
this.set(`itemCollection.${i}.value`, existing.value);
});
this.set('itemCollection', JSON.parse( JSON.stringify(this.itemCollection) );
// Alternatively
// const tempArr = JSON.parse( JSON.stringify(this.itemCollection) );
// this.set('itemCollection, []); // override dirty checking, as stated in the documentation
// this.set('itemCollection', tempArr);
},
Another solution could be to create a new array of existingValues, breaking the "reference chain" so existingValues != itemCollection. That is, if the issue is a reference problem.
_populateAlerts: function(existingValues) {
const copiedExistingValues = JSON.parse( JSON.stringify(existingValues) );
this.itemCollection.forEach((question, i)=> {
const existing =
copiedExistingValues.find(value => value.name === question.name);
this.set(`itemCollection.${i}.picklist_value_id`,
existing.picklist_value_id);
this.set(`itemCollection.${i}.value`, existing.value);
});
},
However, if you're only interested in the first occurance, I would create an object of existingArrays to avoid cubic looping while also breaking the reference chain.
_populateAlerts: function(existingValues) {
const existingValuesObj = this._createObjectFrom(existingValues, 'name');
this.itemCollection.forEach((question, i)=> {
this.set(`itemCollection.${i}.picklist_value_id`,
existingValuesObj[question.name].picklist_value_id);
this.set(`itemCollection.${i}.value`, existingValuesObj[question.name].value);
});
},
_createObjectFrom: function (arr, property, overwritePreviousObj) {
var obj = {};
var propertyName = '';
for (var i = 0; i < arr.length; i++) {
propertyName = arr[i][property];
if (overwritePreviousObj) {
obj[propertyName] = arr[i];
} else if (!obj.hasOwnProperty(propertyName) {
obj[propertyName] = arr[i];
}
}
return obj;
},