1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
# angular-diff
An Angular JS plugin to compare and show object differences in JSON format. [Demo](http://hipster-labs.github.io/angular-object-diff/)
# 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
```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
<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
```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
<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
|
