angular-object-diff

An Angular JS plugin to compare and show object differences in JSON format. Demo with bower ``` bower install angular-object-diff --save ``` ``` ``` or with npm ``` npm i angular-object-diff ``` setOpenChar: set the opening character for the view, default is { setCloseChar: set the closing character for the view, default is } diff: compare and build all the difference of two objects including prototype properties diffOwnProperties: compare and build the difference of two objects taking only its own properties into account toJsonView: format a diff object to a full JSON formatted object view toJsonDiffView: format a diff object to a JSON formatted view with only changes objToJsonView: format any javascript object to a JSON formatted view toJsonView: format a diff object to a full JSON formatted object view toJsonDiffView: format a diff object to a JSON formatted view with only changes objToJsonView: format any javascript object to a JSON formatted view Declare the dependency ``` angular.module('myModule', 'ds.objectDiff'); ``` Inject the service ```javascript angular.module('myModule')

.controller('MyController', ['$scope', 'ObjectDiff', function($scope, ObjectDiff){

$scope.yourObjectOne = {//all your object attributes and values here};

$scope.yourObjectTwo = {//all your object attributes and values here};

// This is required only if you want to show a JSON formatted view of your object without using a filter

$scope.yourObjectOneJsonView = ObjectDiff.objToJsonView($scope.yourObjectOne);

$scope.yourObjectTwoJsonView = ObjectDiff.objToJsonView($scope.yourObjectTwo);

// you can directly diff your objects js now or parse a Json to object and diff

var diff = ObjectDiff.diffOwnProperties($scope.yourObjectOne, $scope.yourObjectTwo);

// you can directly diff your objects including prototype properties and inherited properties using `diff` method

var diffAll = ObjectDiff.diff($scope.yourObjectOne, $scope.yourObjectTwo);

// gives a full object view with Diff highlighted

$scope.diffValue = ObjectDiff.toJsonView(diff);

// gives object view with onlys Diff highlighted

$scope.diffValueChanges = ObjectDiff.toJsonDiffView(diff);

}]);

``` Bind the variables directly in your html using the ng-bind-html angular directive. Use a <pre> element for better results ```html

``` The same can be done with filters as well ```javascript angular.module('myModule')

.controller('MyController', ['$scope', 'ObjectDiff', function($scope, ObjectDiff){

$scope.yourObjectOne = {//all your object attributes and values here};

$scope.yourObjectTwo = {//all your object attributes and values here};

// you can directly diff your objects js now or parse a Json to object and diff

var diff = ObjectDiff.diffOwnProperties($scope.yourObjectOne, $scope.yourObjectTwo);

// you can directly diff your objects including prototype properties and inherited properties using `diff` method

var diffAll = ObjectDiff.diff($scope.yourObjectOne, $scope.yourObjectTwo);

}]);

``` Bind the variables directly in your html using the ng-bind-html angular directive. Use a <pre> element for better results ```html

``` Inspired from https://github.com/NV/objectDiff.js