JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
JavaScript
var baseObj = {baseObj : {
image: {
width: '100%',
paddingTop: '0px',
paddingRight: '0px',
paddingBottom: '0px',
paddingLeft: '0px'
},
wrap: {
marginTop: '0px',
marginRight: '0px',
marginBottom: '0px',
marginLeft: '0px'
}
}}
var mergedObject = {
mergedObject : {
image: {
width: '100%',
paddingTop: '0px',
paddingRight: '24px', // modified value
paddingBottom: '24px', // modified value
paddingLeft: '0px'
},
wrap: {
height: '100px', // new value
marginTop: '24px', // modified value
marginRight: '0px',
marginBottom: '0px',
marginLeft: '24px' // modified value
}
}
}
var finalChildObjects = {};
var previousObject = '';
var previousResult = '';
var checkIfObject = function(item){
_.each(item, function(v, k){
if(_.isObject(v)){
previousObject = k;
previousResult = v;
return checkIfObject(v);
}else{
finalChildObjects[previousObject] = previousResult;
}
})
return finalChildObjects
}
baseObjectFinalTurn = checkIfObject(baseObj);
mergedObjectFinalTurn = checkIfObject(mergedObject);
var difference = {};
_.each(baseObjectFinalTurn, function(v, k){
if(mergedObjectFinalTurn[k]){
difference[k] = _.reduce(baseObjectFinalTurn[k], mergedObjectFinalTurn[k], function(result, value, key){
return result
}, {})
}
else{
difference[k] = {};
}
})
console.log(difference)