JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<div></div>

JavaScript

/*****************************************
 ** DUMMY DATA
 ****************************************/

var user1 = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}


var user2 = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        twitter: '@wilsonpage',
        tel: '123456789'
    }  
}
    

    
/*****************************************
 ** PLUGIN
 ****************************************/
   
var obDiff = function(ob1, ob2) {

    var diff = ob2;
    
    for(var prop in ob1){
        
        var val1 = ob1[prop],
            val2 = ob2[prop];
        
        //console.log(val1);
        
        if(typeof val1 == 'string'){
            //console.log('string');
            // if the values match: remove if from the diff
            if(val1 == val2){ delete diff[prop] };
            
        }else{
            var diff2 = obDiff(val1, val2);
            
            if(!diff2){ delete diff[prop] };
        } 
        
        
    }
    
    if(!isEmpty(diff)) return diff;
}


// A small dependency
var isEmpty = function(obj) {
    for(var prop in obj){
        if(obj.hasOwnProperty(prop)){ return false };
    }
    return true;
}  
  
  
/*****************************************
 ** USAGE
 ****************************************/    
var diff = obDiff(user1, user2);


// log result to console
console.log(diff);












// my object print function
var print = function(o){
    var str='';
    
    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }
    
    return str;
}

// append this to the result div
$('div').append( print(diff) );