Skip to content
This repository has been archived by the owner. It is now read-only.
An Angular JS plugin to compare and show object differences. Demo-
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 4299d06 Mar 11, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update to version 1.0.3 Mar 11, 2016
.editorconfig Initial commit Nov 2, 2015
.gitattributes Initial commit Nov 2, 2015
.gitignore Initial commit Nov 2, 2015
.jscsrc Initial commit Nov 2, 2015
.jshintignore Initial commit Nov 2, 2015
.jshintrc Initial commit Nov 2, 2015
LICENSE Initial commit Nov 2, 2015
README.md update screenshot Jan 23, 2016
angular-object-diff.js update to version 1.0.2 Mar 11, 2016
angular-object-diff.less update less Jan 1, 2016
bower.json update to version 1.0.3 Mar 11, 2016
demo.js update demo Mar 11, 2016
gulpfile.js add GA Feb 26, 2016
index.html update demo Mar 11, 2016
package.json update to version 1.0.3 Mar 11, 2016
screenshot.png screenshot Jan 23, 2016

README.md

angular-diff

An Angular JS plugin to compare and show object differences in JSON format. Demo

Screenshot

Installation

with bower

bower install angular-object-diff --save
<link type="text/css" href="bower_components/dist/angular-object-diff.css" rel='stylesheet'>
<script type="text/javascript" src="bower_components/dist/angular-object-diff.js"></script>

or with npm

npm i angular-object-diff

Available methods on ObjectDiff service

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

Available filters

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

Usage

Declare the dependency

angular.module('myModule', ['ds.objectDiff']);

Inject the service

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

<pre ng-bind-html="diffValue"></pre>
<pre ng-bind-html="diffValueChanges"></pre>
<pre ng-bind-html="yourObjectOneJsonView"></pre>
<pre ng-bind-html="yourObjectTwoJsonView"></pre>

The same can be done with filters as well

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

<pre ng-bind-html="diffValue | toJsonView"></pre>
<pre ng-bind-html="diffValueChanges | toJsonDiffView"></pre>
<pre ng-bind-html="yourObjectOneJsonView | objToJsonView"></pre>
<pre ng-bind-html="yourObjectTwoJsonView | objToJsonView"></pre>

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

You can’t perform that action at this time.