JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="tableResult" class="table table-hover table-striped" >
  <thead>
    <tr>
      <th>
        current
      </th>
      <th>
        new
      </th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

JavaScript

(function() {
  'use strict';

  function diffObjects(obj1, obj2) {
    console.log('inside diff Objects');
    console.log(obj1, obj2);
    let res = [];
    let objKeysArray = _.keys(obj2) || [];
    if (!obj1 || !obj2) {
      return res;
    }
    if (objKeysArray.length === 0) {
      return res;
    }
    console.log('before foreach ....');
    _(objKeysArray).forEach((key) => {
      console.log(obj1[key], obj2[key]);
      if (_.isArray(obj1[key]) && _.isArray(obj2[key])) {

      } else if (_.isObject(obj1[key]) && _.isObject(obj2[key])) {
        // let childObjKeysArray = _.keys(obj2[key]) || [];
        // let objRes = _.map(childObjKeysArray, (childKey) => {
        // return diffObjects(obj1[key][childKey], obj2[key][childKey]);
        // });
        // res = [].concat(res, objRes);
      } else if (!_.isEqual(obj1[key], obj2[key])) {
        let change1 = `${key} : ${obj1[key]}`;
        let change2 = `${key} : ${obj2[key]}`;
        res.push({
          currentVal: change1,
          newVal: change2
        });
      }
    });
    return _.flattenDeep(res);
  }

  var json1 = {
    "id": 1,
    "title": "Object 1",
    "description": "Object 1 Description",
    "relations": {
      "tools": [{
        "id": 2,
        "title": "my first tool",
        "description": "tools description",
        "types": [{
          "id": 123,
          "name": "test"
        }, {
          "id": 111,
          "name": "test2"
        }]
      }],
      "training": [{
        "id": 3,
        "title": "Test training",
        "description": "training Description",
        "trainingTypes": [{
          "id": 1,
          "name": "online"
        }, {
          "id": 2,
          "name": "in-person"
        }, {
          "id": 3,
          "name": "boot camp"
        }]
      }]
    }
  };
  var json2 = {
    "id": 1,
    "title": "Object 1 UPDATED",
    "description": "Object 1 Description UPDATED",
    "relations": {
      "tools": [{
        "id": 2,
       ...