Javascript diff between objects

Question

I'm trying to show a table in my html that shows a CRUD log. My php script is selecting and storing the object before and after the UPDATE and saving the json object to the table. This is what my html table looks like:

Im trying to get it to show whats changed by comparing the 2 objects and finding the objects that don't match then showing in the table name:old value and name:new value in a readable view.. This is my function (that is returning no difference)

$scope.parsehistory = function(old, neww) {
       try {

    var o1 = JSON.parse(old),
        o2 = JSON.parse(neww);



    var old_value = _.omit(o1, function(v, k) {
        return o2[k] === v;
    });

    const new_value = Object.keys(old_value).reduce((accumulator, key) => {
        accumulator[key] = o2[key];
        return accumulator;
    }, {});

    var length = Object.keys(old_value).length;
    var keys = Object.keys(old_value);

    console.log("length:", length);
    for (i = 0; i < length; i++) {
        var name = keys[i];

        var oldvaluee = old_value[name];
        var newvaluee = new_value[name];
        var valuechanged = name;
        console.log("newval", newvaluee);
        console.log("oldval", oldvaluee);
        console.log("valuechanged", valuechanged);
        //studyCrudlog=function(uid,original_value,new_value,description,componant_name,study_id)
        //AppStorage.studyCrudlog($scope.newuser.users_id,oldvaluee,newvaluee,(valuechanged + " value changed."),"Users",AppStorage.getStudy().id);
    }
} catch (ex) {
    console.log(ex);
  }
}

Below is the result of the

console.log("newval", newvaluee); console.log("oldval", oldvaluee); console.log("valuechanged", valuechanged);

In this case, the difference would be numberid and sitename

Any assistance would be highly appreciated!

Please share an example of a sample input and expected output. — Nandu Kalidindi
– Nandu Kalidindi, Commented Dec 10, 2017 at 7:56

Nandu Kalidindi · Accepted Answer · 2017-12-10 08:46:07Z

1

Your implementation is almost close, you just need to use omitBy.

_.omit accepts string[] which basically removes any keys specified in the array.

_.omitBy accepts a callback where the properties are filtered accordingly with more control.

const o1 = {sitename: "newValue", numberid: "newValue", id: "28"};

const o2 = {sitename: "newValue33", numberid: "newValue33", id: "28"};

const oldValue = _.omitBy(o1, (v, k) => o2[k] === v)

console.log(oldValue);

const newValue = Object.keys(oldValue).reduce((a, b) => { a[b] = o2[b]; return a;}, {})

console.log(newValue);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

edited Dec 10, 2017 at 8:46

answered Dec 10, 2017 at 8:18

Nandu Kalidindi

6,2901 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Gaz Smith Over a year ago

It's still returning the full object mate

Nandu Kalidindi Over a year ago

May be there is something wrong, isn't the example I posted is what you expect to happen?

Gaz Smith Over a year ago

Yeah your example works mate but when i switch to const o1 = JSON.parse(old);const o2 = JSON.parse(neww); it doesnt, the only difference is my parsed json object is enclosed in [{}] rather than just [].. could that be why?

Gaz Smith Over a year ago

in the inspector when i log your example is {blabla} and mine is [{blabla}]

Nandu Kalidindi Over a year ago

So, you are looking for an array of objects? Does your array contain more than one object or it is always one?

|

Sunil Hari · Accepted Answer · 2017-12-10 08:16:50Z

0

Please see this piece of code.It would give the list of changed values, assuming that the object would have the same structure.

    /*Checks if objects are same*/
function isObjectsSame(a, b) {
  var objStringA = JSON.stringify(a),
    objStringB = JSON.stringify(b);

  return (objStringA == objStringB);
}

function objDiff(a, b) {
  var isSame = isObjectsSame(a, b);
  var changeTracker = [];
  if (isSame) {
    console.log('Objects are equal.No values changed');
  } else {
    var keys = Object.keys(a),
      key;
    for (var i = 0; i < keys.length; i++) {
      key = keys[i];
      if (a[key] != b[key]) {
        changeTracker.push({ //Captures the difference.
          key: key,
          value: [a[key], b[key]]
        })
      }
    }

    console.log(changeTracker); // Prints the difference
  }
}

Please pass your objects to the function objDiff(obj1,obj2);

edited Dec 10, 2017 at 8:16

answered Dec 10, 2017 at 8:10

Sunil Hari

1,7941 gold badge12 silver badges20 bronze badges

2 Comments

Gaz Smith Over a year ago

For some reason im getting false

Sunil Hari Over a year ago

My Bad.Edited the answer.Can you pass the objects to the function objDiff

Collectives™ on Stack Overflow

Javascript diff between objects

2 Answers 2

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related