A simple script that adds a function to the console.table
object that displays a styled table of difference between 2 arrays of objects, since there's no styling capabilities on the console.table
function, as per the Console API.
It is useful for debugging in the browser's Web Console in a clear and neat way.
Consider having 2 arrays of objects and you want to find the difference between them, and then display the result in a styled table. The difference is computed using the lodash.differenceWith and lodash.isEqual methods.
Definition: console.table.diff(objAr1, objAr2);
var persons = [
{name: 'John', age: 24, gender: 'M'},
{name: 'Jane', age: 22, gender: 'F'},
{name: 'Smith', age: 26, gender: 'M'}
];
console.table.diff(persons, [{name: 'John', age: 24, gender: 'M'}]);
// Or console.table.diff(persons, [persons[0]]);
// The lodash.isEqual comparator used performs a deep comparison
// between the 2 values to determine if they are equivalent.
Output:
The rows with red background represent the common objects between the 2 arrays.
The rows with green background represent the rest of the objects in array 1.
npm i console.table.diff
Get the difftable.min.js file, then place this script tag in your HTML:
<script type="text/javascript" src=".../difftable.min.js"></script>
For browserify:
var consoleTable = require('console.table.diff');
// consoleTable has the 'window.console.table' object.
// undefined in Node.
MIT © 2017 Saad Malaeb.