<textarea id="test" rows="30" cols="100">
  
</textarea>
var arrayObj = [
  {
    animals: {
      cat: {
        voice: 'meow',
        other: {
          name: 'Tom'
        }
      },
      dog: {
        voice: 'gav'
      }
    }
  },
  {
    animals: {
      cat: {
        tail: true
      },
      dog: {
        eyes: 'two'
      }
    }
  }
]

// var result = {
//     animals: {
//       cat: {
//         voice: 'meow',
//         other: {
//           name: 'Tom',
//         },
//         tail: true,
//       },
//       dog: {
//         voice: 'gav',
//         eyes: 'two',
//       }
//     }
// }


document.getElementById('test').value = JSON.stringify(_.merge(arrayObj[0], arrayObj[1]),null, 2);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js