Compare properties that exist in both objects

Question

I have two objects:

var a = {
  world: 'Mamba',
  planet: 'Oliver'
}

var b = {
  world: 'Koko'
}

How do I compare only those properties that exists in both objects? On my example it would be the property "world".

Answer 1

Using underscore:

You can get the keys of both objects (using Object.keys), do an intersection (using _.intersect) on them and iterate through them and compare:

var keys1 = Object.keys(a);
var keys2 = Object.keys(b);

var common = _.intersection(keys1, keys2);

common.forEach(function(key) {
    if(a[key] === b[key]) { 
       // they are equal 
    }
});

DEMO

var a = {
  world: 'Mamba',
  planet: 'Oliver',
  test: 'x'
};

var b = {
  world: 'Koko',
  test: 'x'
};

var keys1 = Object.keys(a);
var keys2 = Object.keys(b);

var common = _.intersection(keys1, keys2);

var list = document.getElementById('list');
common.forEach(function(c) {
  list.innerHTML += ('<li id=' + c + '>' + c + '</li>');
});

common.forEach(function(key) {

  var elem = document.getElementById(key);
  if (a[key] === b[key]) {
    elem.innerHTML += ' [equal]';
  } else {
     elem.innerHTML += ' [not equal]';  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<h3>Common Properties</h3>
<ul id="list">
  <ul>

Using vanilla JS:

You can iterate over all properties of a, check if it exists in b, and compare:

for(var prop in a) {
    if(a.hasOwnProperty(prop) && b.hasOwnProperty(prop) && a[prop] === b[prop]) {
        // they are equal
    }
}

Note: Use hasOwnProperty to not include properties available via prototype.

DEMO

var a = {
  world: 'Mamba',
  planet: 'Oliver',
  test: 'x'
};

var b = {
  world: 'Koko',
  test: 'x'
};

var list = document.getElementById('list');
for (var prop in a) {
  
  if (a.hasOwnProperty(prop) && b.hasOwnProperty(prop)) {
  
    list.innerHTML += '<li id="' + prop + '">' + prop + '</li>';

    var elem = document.getElementById(prop);
    if (a[prop] === b[prop]) {
      elem.innerHTML += ' [equal]';
    } else {
      elem.innerHTML += ' [not equal]';
    }
  }
}

<h3>Common Properties</h3>
<ul id="list">

</ul>

---

The vanilla JS way is more efficient in terms of run time.

The reason being that it only iterates over the properties of a once.

The underscore way needs to obtain object keys (which requires iteration over each object), then another iteration through the key arrays to find the intersection, and then iterate again over the intersection before comparing.

Answer 2

If you use underscore Js, it would be easy for you. Underscore has a method(_.intersection) which iterate over object or array.

 var intersection=_.intersection(keys(a),keys(b));
 console.log(intersection);  // ["world"]
 $.each(intersection,function(index,value){
   if(a[value] == b[value])
     //write your code
});

Otherwise firstly find intersection of objects and iterate the matched array for matching the related value.

var a = {
  world: 'Mamba',
  planet: 'Oliver'
}

var b = {
  world: 'Koko'
}
var arr = [];

// Find the matched keys in array(Intersection of keys)

$.each(Object.keys(a), function(index1, value1) {
  $.each(Object.keys(b), function(index2, value2) {
    if (value1 == value2)
      arr.push(value1)
  });

});

//Then iterate over array of keys to find matched value.

$.each(arr, function(index, value) {
  if (a[value] == b[value])
  // write your code.
});