Taking diff of two array's not working

[tnrich]

Taking the diff like so:

var lhs = ["a","a"];
var rhs = ["a"];
var differences = deep.diff(lhs, rhs);
differences.forEach(function (change) {
        deep.applyChange(lhs, true, change);
});

fails when trying to apply that change with this message:

/Users/trich/Sites/deepDiff/index.js:195
, last = change.path.length - 1
^
TypeError: Cannot read property 'length' of undefined
at Function.applyChange (/Users/trich/Sites/deepDiff/index.js:195:27)
at observed (/Users/trich/Sites/deepDiff/examples/example1.js:38:14)
at Array.forEach (native)
at Object. (/Users/trich/Sites/deepDiff/examples/example1.js:37:13)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)

[joeldenning]

See pull request #43, which provides a fix for this. Even after the pull request, however, this will only work if there is only one diff between lhs and rhs. If you need to apply two array diffs, you must be aware that the order in which you apply diffs determines whether the changes can be made. This is because the diff indicates which index to add/remove/edit, but array indexes change when you delete elements. For example, the code below doesn't work as expected:

var lhs = ["a","a","a"];
var rhs = ["a"];
var differences = deep.diff(lhs, rhs);
differences.forEach(function (change) {
    deep.applyChange(lhs, true, change);
});
// lhs === ["a","a"]

A workaround is to apply changes in the reverse order in which they are given

var lhs = ["a","a","a"];
var rhs = ["a"];
var differences = deep.diff(lhs, rhs);
for (var i = differences.length - 1; i >= 0; i--) {
    deep.applyChange(lhs, true, differences[i]);
}
// lhs === ["a"]

[jonathan-reisdorf]

Great tip. To simplify it, you can also write

deep.diff(lhs, rhs).reverse().forEach(function(diffItem) {
  deep.applyChange(lhs, true, diffItem);
});

But there should be a wrapper method to make that easier anyway. I was hoping I could use applyDifffor that matter, but it doesn't accept what I had in mind. (I am just transferring the diff result from one browser window to the other in order to get incremental state persistency)

[jonathan-reisdorf]

Oh, I just saw that the @joeldenning has provided is for a different problem (useful for me anyway)

[flitbit]

Verified fixed 2017-04-24.