JSON Diff

commit add306e6ba94cc0bf8c455158a332fb051ffde68 Author: Sami Samhuri Date: Mon Dec 6 09:48:06 2010 -0800 first commit diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..04a8873 --- /dev/null +++ b/Readme.md @@ -0,0 +1,8 @@ +JSON Diff +========= + +Shows the differences between two JSON-encoded objects. + +Originally created by Tom Robinson. Improvements by Sami Samhuri. + +Copyright 2006-2010 [Tom Robinson](https://github.com/tlrobinson). [Some rights reserved](http://creativecommons.org/licenses/by-nc/3.0/us/). diff --git a/closed.png b/closed.png new file mode 100644 index 0000000..147c717 Binary files /dev/null and b/closed.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..73ec5e1 --- /dev/null +++ b/index.html @@ -0,0 +1,245 @@ + + + JSON Diff + + + + + +

Courtesy of tlrobinson. +
+ This version differs in that it supports null values,
+ downplays the significance of changed properties with the key key,
+ and provides links to jump from one change to the next.

+ +

JSON Diff

Paste some JSON in each of the text fields. Click "Compare" to see the diff.
Changed portions are displayed in yellow. Additions are displayed in green. Deletions are displayed in red.
It also works as a JSON viewer. Click the disclosure triangles to display/hide portions of the JSON.
Invalid JSON is indicated by the text fields turning red.
Swap the contents of the text areas by clicking "Swap". Clear them by clicking "Clear".

+ + + + + +

+ +

About

JSON Diff is a simple way to visualize and compare JSON.

Known Issues

Diff algorithm not very intelligent when dealing with arrays
Probably doesn't work in IE

+ +
+
+

+ + + diff --git a/json-diff.css b/json-diff.css new file mode 100644 index 0000000..04dc054 --- /dev/null +++ b/json-diff.css @@ -0,0 +1,73 @@ +body { + background-color: lightblue; +} + +#results li > span, #results ul > span { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + padding-right: 5px; + padding-left: 5px; +} + +#results li { + margin-top: 1px; + padding-left: 15px; +} +#results ul { + padding-left: 15px; + margin-left: -15px; + padding-top: 0px; + margin-top: 0px; + background: url(open.png) no-repeat 2px 5px; + list-style-type: none; +} +#results ul[closed="yes"] { + background: url(closed.png) no-repeat 2px 5px; +} +#results ul[closed="yes"] > * { + display: none; +} +#results ul[closed="yes"] > *:first-child { + display: block; +} +.typeName { + color: gray; +} +.changed { + background-color: #fcff7f; +} +.changed.key { + background-color: #eee; +} + +.added { + background-color: #8bff7f; +} +.removed { + background-color: #fd7f7f; +} + +textarea { + width: 49%; + height: 200px; +} + +.contentbox { + border: 1px dashed black; + background-color: white; + padding: 15px; + margin: 10px; +} + +h2 { + text-align: center; + margin: 0px;; +} + +#results { + padding-left: 40px; +} + +#inputs { + text-align: center; +} \ No newline at end of file diff --git a/open.png b/open.png new file mode 100644 index 0000000..1d48c6a Binary files /dev/null and b/open.png differ