How to traverse JS object and all arrays and objects inside to compare it with its copy?

Question

I have a selectedItem object in Angular, it contains other objects and arrays. I create a deep copy using a JSON trick:

$scope.editableItem = JSON.parse(JSON.stringify($scope.selectedItem))

Then I use editableItem model in inputs, change some values inside. selectedItem doesn't change. Then I want to send via PATCH all the changes made, but not the fields which were not changed. So I need to strip the editableItem from all fields that are the same in unchanged selectedItem.

How to do this efficiently? I was thinking about traversing object recursively using Underscore, but I'd really like to know if it's a good way of thinking before I tackle it.

Alternatively I could probably create third object which would only contain touched fields from the second one, added dynamically, but I'm not sure how to approach this.

EDITED: To be clear, I expect the answer to be generic and assume the most complicated object structure possible. For example no answers from this question are applicable here as they either assume the object has only simple fields or they need to have Angular watcher explicitly set for every field separately.

How do you want to express differences in arrays? As sparse arrays (which you can't properly convert to JSON)? — CherryDT, May 09 '16 at 13:48
Good point. I guess: if there's no difference, then don't send the array at all. If there's a difference, send the whole changed array. So array as a whole is a value which can be changed and passed or unchanged and not passed. — JoannaFalkowska, May 09 '16 at 13:57

score 1 · Answer 1 · answered May 09 '16 at 13:48

1

I do something similar with a function like this:

function getUpdateObject(orig, current) {
    varChanges = {};

    for (var prop in orig) {
        if (prop.indexOf("$") != 0 && orig[prop] !== current[prop]) {
            varChanges[prop] = current[prop];
        }
    }
    return varChanges ;
};

I don't think this will get you all the way there. I'm not using it in any scenarios where the objects have member objects or arrays, but you should be able to test if "prop" is an object or array and call it recursively. The biggest caveat I see to that approach is if you have a deep, nested structure, you may not detect a change until you're down several levels. You'd probably have to keep the full potential hierarchy for a changed property in memory, then when you detect a change at a lower, level, write the whole hierarchy to the output object.

answered May 09 '16 at 13:48

Mike Feltman

5,160
1
17
38

I can create a third object copy and then delete the fields which are the same from it, this would be probably easier than creating it on the fly. – JoannaFalkowska May 09 '16 at 13:54
Sounds reasonable. More memory intensive though. – Mike Feltman May 09 '16 at 16:10
What does `property.indexOf("$")` do? – JoannaFalkowska May 10 '16 at 10:03
1

It skips properties that begin with a $. You may or may not need it, but Angular tends to add a few things of its own to your objects that you don't need to send with updates, so this eliminates them. – Mike Feltman May 10 '16 at 12:28

score 0 · Accepted Answer · answered Sep 06 '16 at 14:17

This is what I ended up with. Maybe it'll help someone. I used DeepDiff library. Code is in CoffeScript, should be easy to translate to JavaScript if anyone needs it.

   $scope.getChangesObject = () ->
      selected = $scope.selectedItem
      editable = $scope.editableItem
      changes = {}
      differences = DeepDiff(selected, editable)

      for diff in differences
        formattedPath = ""
        for pathPart, index in diff.path
          if index isnt diff.path.length - 1
            formattedPath += pathPart + "."
          else
            formattedPath += pathPart
        changes[formattedPath] = editable[formattedPath]

      changes

How to traverse JS object and all arrays and objects inside to compare it with its copy?

2 Answers2