Compare two JSON

In this example below you will see how to do a Compare two JSON with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1kohei1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1kohei1 ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Compare two JSON</title>
  
  
  
  
  
</head>

<body>

  
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1kohei1/compare-two-json-xGQydz */
var prod = {
  a: 1,
  b: 2,
  c: {
    id: 1, 
    name: '1kohei1',
    address: 'USA'
  }
}
var dev = {
  a: 1,
  b: 2,
  c: {
    address: 'Something different'
  }
}
var objectKeys = {};
var excludedKeys = ['address'];

console.log('---START---');
compareTwoJSON(prod, dev, '', objectKeys, excludedKeys);

/**
 * Print out diff of two JSON
 * @param jsonA The correct JSON
 * @param jsonB JSON you want to check diff
 * @param keys Necessary for the function. Just pass ''
 * @param objectKeys Objects to find unique objects in array.
 * @param excludedKeys Array of keys that doesn't have to be checked.
 */
function compareTwoJSON(jsonA, jsonB, keys, objectKeys, excludedKeys) {
  for (var key in jsonA) {
    if (jsonB.hasOwnProperty(key)) {
      if (jsonA[key] === null && jsonB[key] === null) {
        // Ignore null first because typeof null is object
      } else if (typeof jsonA[key] === typeof jsonB[key]) { // Check the data type
        if (Array.isArray(jsonA[key])) { // If the data type is array
          keys = '[' + key + ']';
          var jsonAArray = jsonA[key];
          var jsonBArray = jsonB[key];

          for (var i = 0; i < jsonAArray.length; i++) { // Find the same item in jsonB[key] by iterating jsonA[key]
            var jsonAItem = jsonAArray[i];
            var jsonBItem = '';
            var objectKey = objectKeys[key];
            if (typeof jsonAItem === 'object') {
              // If it is an array of objects, find the equal object by property
              jsonBItem = _.find(jsonBArray, function(obj) {
                return obj[objectKey] === jsonAItem[objectKey];
              });
            } else {
              jsonBItem = _.find(jsonBArray, function(obj) {
                return obj === jsonAItem;
              });
            }
            if (jsonBItem) { // Check if the same item is found in jsonB[key]
              if (keys && keys.indexOf('.') >= 0) {
                keys = keys.split('.').splice(0, 1);
              }
              keys += '.' + jsonAItem[objectKey];
              compareTwoJSON(jsonAItem, jsonBItem, keys, objectKeys, excludedKeys); // Iterate again to compare item in jsonA and jsonB
            } else {
              var missingItem = typeof jsonAItem === 'object' ? jsonAItem[objectKey] : jsonAItem;
              console.log('1. Dev is missing [' + key + '].' + missingItem);
            }
          }
        } else if (typeof jsonA[key] === 'object') {
          if (keys && keys.indexOf('.') >= 0) {
            keys = keys.split('.').splice(0, 1);
          }
          var objectKey = objectKeys[key];
          keys += _.isUndefined(objectKey) ? key : objectKey;
          compareTwoJSON(jsonA[key], jsonB[key], keys, objectKeys, excludedKeys);
        } else if (!_.isEqual(jsonA[key], jsonB[key])) {
          if (excludedKeys.indexOf(key) === -1) {
            console.log('2. Dev has different value at ' + keys + '.' + key);
          }
        }
      } else {
        console.log('3. Dev has different data type at ' + keys + '.' + key);
      }
    } else {
      console.log('4. Dev is missing property ' + keys + '.' + key);
    }
  }
}

console.log('---FINISH---');

Comments