zgrossbart / jdd

A semantic JSON compare tool

JSON Diff

JSON Diff expands on the amazing work by the team at jsonlint.com and provides a semantic compare tool for JSON documents.

I often work with large documents and it's difficult to see the differences between them. Normal text compare tools work well for finding the differences in JavaScript code, but JSON data can have many differences in the text that don't actually change the data.

JSON Diff sorts, formats, and compares two JSON documents to find the actual semantic differences instead of just the text ones.

Try it out: http://www.jsondiff.com

Run the built-in unit tests: http://www.jsondiff.com/index-test.html

Run JSONDiff in a Docker container

You can also run JSONDiff in a Docker container if you want to run it in your data center or just on your laptop. First install Docker and then open a terminal the run the following command:

docker run -d --name jdd --rm -p 8080:80 zgrossbart/jsondiff

Now go to localhost:8080 to access your locally running version of JSONDiff.

You can stop the container with this command:

docker stop jdd

You can also build the Docker file locally and run it with these commands:

docker build --tag=jdd:v1-alpine --file=Dockerfile.alpine .
docker run -i --name jdd -p 127.0.0.1:8080:80/tcp jdd:v1-alpine

Run JSONDiff as an offline browser extension

@gangadharjannu has built a JSONDiff browser extension which works entirely offline.

You can install JSONDiff as a Chrome or Firefox browser extension and try to run on your laptop whether you are connected to internet or not.

Just like jsondiff.com, this browser extension does not collect any data and provides strict privacy as this is developed to work offline.

Your data stays in your browser and never leaves your system.

Browser extension links

Repository: https://github.com/gangadharjannu/json-diff

To download the extension, visit below links on your respective browsers

Google Chrome: https://chrome.google.com/webstore/detail/json-diff/dmndidoancoefdoobhbmjgignfimpmpj

Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/json-diff

Load my JSON data from the Internet

JSONDiff also supports two query paramaters so you can load your JSON data from the Internet instead of having to enter it into the UI.

Parameter	Description
left	An URL to the file to compare on the left side of the diff
right	An URL to the file to compare on the right side of the diff

These parameters work like this:

https://jsondiff.com/?left=https://jsondiff.com/one.json&right=https://jsondiff.com/two.json

Each parameter must be a full URL and must be publicly accessible over the Internet.

Load my JSON data in the URL

JSONDiff can use the two query parameters to load data embedded in the URL.

Parameter	Description
left	A base64 data URL that contains the JSON to be compared on the left side of the diff
right	A base64 data URL that contains the JSON to be compared on the right side of the diff

These parameters work like this:

https://jsondiff.com/?left=data:base64,eyJmb28iOiAxfQ==&right=data:base64,eyJmb28iOiAyfQ==

You can encode JSON data using these parameters to easily send or save two documents to compare.

There are various tools you can use to base64 a JSON file including the command line and websites.

Load my JSON data via URL hash

JSONDiff also accepts the query parameters to be passed as hash properties like this:

https://jsondiff.com/#left=data:base64,eyJmb28iOiAxfQ==&right=data:base64,eyJmb28iOiAyfQ==

This option works well for larger JSON files which are too large for the previous method using URL parameters.

How large a file can JSONDiff handle?

JSONDiff does all of the comparing and rendering right in your browser. That means it's limited by the browser your running (Chrome is normally the fastest), how fast your computer is, and how much memory you have. However, it can handle a very large file.

We have two sample files from the Pokemon Go API describing the Pokemon Charmander: charmander_left.json and charmander_right.json. Each of these files are over 240 kb and almost 13,000 lines when formatted. You can load and compare them with a single URL:

https://jsondiff.com/?left=https://jsondiff.com/charmander_left.json&right=https://jsondiff.com/charmander_right.json

Thanks to some recent performance improvements from @Pluckerpluck you can now compare the two in just a few seconds. Click the URL above and try it out for yourself.

Is JSONDiff Secure?

You might notice that http://www.jsondiff.com doesn't run with HTTPS and ask, is JSONDiff secure? The short answer is yes, but you shouldn't take my word for it.

JSONDiff does all of the comparing in the browser. It never sends any of your JSON data anywhere and you can run a little experiment to prove it.

Open the developer tools in your browser and select the Network tab. You'll see all of the requests your browser sends. It looks like this:

Now do a JSON compare with some sample data and watch the requests. There will be no new requests. That shows that we don't send your data anywhere.

What data does JSONDiff load?

JSONDiff loads the following files when it first starts up:

File	Description
jsondiff.com	The main index page for the site
adsbygoogle.js	We load ads from Google
reset.css	The reset CSS file
throbber.css	A CSS loading icon
jdd.css	The CSS file for JSONDiff
jsl.format.js and jsl.parser.js	The JSON formatter and parser that JSONDiff uses when doing a compare
jdd.js	The code that runs JSONDiff
analytics.js	Google Analytics that we use to see how many people are using JSONDiff.com
collect	Google analytics loads these scripts for analytic data
js	This is gtag support for analytics
favicon.ico	The JSONDiff icon that shows up in the tab of your browser

JSONDiff will never load any more files.

What data does JSONDiff send back over the Internet?

It sends nothing. It just loads the open source files it needs to run and never sends any of the JSON data it is comparing anywhere.

All the security details

This readme file just gives the high level details of the security of JSONDiff. Check out our threat model for all of the details about the security of JSONDiff.

Why does JSONDiff use HTTPS?

Given the fact we don't send any data over the Internet you might ask why we're using HTTPS. We don't have any data to encrypt.

HTTPS provides encryption of the data, but it also provides verification of the identity of the site. HTTPS guarantees that we are who we say we are and you aren't getting a man in the middle attack where a different site is pretending to be JSONDiff.com.

That still doesn't feel secure enough

If that still doesn't feel secure enough you have some other options. It's very easy to host JSONDiff for yourself. You can either run in a Docker container, or run on any web server that supports PHP. You can even skip the PHP part if you don't want to support loading JSON automatically. Just drop the JSONDiff files in your web server directory and you're done.

Monitoring

JSONDiff has a separate monitoring page. You can see the current status at the JSONDiff Upptime page.

jdd's Issues

Removal of jQuery from jdd

Hello @zgrossbart

I use jdd regularly and would like to know your opinion on removal of jQuery.

I am happy to work on PR if you are okay.

compare entire object rather order of object in array

situation is - one json object has four four object in a array and another object has 3 object in a array (same as first but the second one removed) - ideally it should show only second object removed in the output, but its showing second and third object is updated and fourth one is deleted.
JSON 1:
{
"modules": [
{
"id": 454,
"code": "DPI-NDPI-URL",
"description": "nDPI which supports HTTP and HTTPS only",
"expiry-date": "2017-06-21",
"units": 0
},
{
"id": 456,
"code": "DPI-NDPI-FULL",
"description": "nDPI DPI library currently maintained by ntop",
"expiry-date": "2017-06-22",
"units": 0
},
{
"id": 457,
"code": "DPI-NDPI-URL-SIG",
"description": "ndpi"s HTTP/HTTPS only signature updates signature, requires DPI-NDPI-URL",
"expiry-date": "2017-06-14",
"units": 0
},
{
"id": 458,
"code": "FLOWnew",
"description": "Generic module for enabling flows",
"expiry-date": "2017-06-21",
"units": 0
}
]}

JSON 2:

{
"modules": [
{
"id": 454,
"code": "DPI-NDPI-URL",
"description": "nDPI which supports HTTP and HTTPS only",
"expiry-date": "2017-06-21",
"units": 0
},
{
"id": 457,
"code": "DPI-NDPI-URL-SIG",
"description": "ndpi"s HTTP/HTTPS only signature updates signature, requires DPI-NDPI-URL",
"expiry-date": "2017-06-14",
"units": 0
},
{
"id": 458,
"code": "FLOWnew",
"description": "Generic module for enabling flows",
"expiry-date": "2017-06-21",
"units": 0
}
] }

output its showing
{
"type": "update",
"key": "modules",
"embededKey": "$index",
"changes": [
{
"type": "update",
"key": "1",
"changes": [
{
"type": "update",
"key": "id",
"value": 457,
"oldValue": 456
},
{
"type": "update",
"key": "code",
"value": "DPI-NDPI-URL-SIG",
"oldValue": "DPI-NDPI-FULL"
},
{
"type": "update",
"key": "description",
"value": "ndpi"s HTTP/HTTPS only signature updates signature, requires DPI-NDPI-URL",
"oldValue": "nDPI DPI library currently maintained by ntop"
},
{
"type": "update",
"key": "expiry-date",
"value": "2017-06-14",
"oldValue": "2017-06-22"
}
]
},
{
"type": "update",
"key": "2",
"changes": [
{
"type": "update",
"key": "id",
"value": 458,
"oldValue": 457
},
{
"type": "update",
"key": "code",
"value": "FLOWnew",
"oldValue": "DPI-NDPI-URL-SIG"
},
{
"type": "update",
"key": "description",
"value": "Generic module for enabling flows",
"oldValue": "ndpi"s HTTP/HTTPS only signature updates signature, requires DPI-NDPI-URL"
},
{
"type": "update",
"key": "expiry-date",
"value": "2017-06-21",
"oldValue": "2017-06-14"
}
]
},
{
"type": "remove",
"key": "3",
"value": {
"id": 458,
"code": "FLOWnew",
"description": "Generic module for enabling flows",
"expiry-date": "2017-06-21",
"units": 0
}
}
]
}

Comparing very large JSON documents causes the browser to run out of memory.

2x 20MB JSONs Crash Firefox Windows 10 :(

Fuzzy numeric diffs

Is there a way to specify that certain fields are considered equal if they are ieee-64 doubles that differ by less than epsilon, where epsilon is field-specific?

I'm also wondering if the tool supports the extended JSON allowed by default by python, namely supports infinities and nans for numeric input.

Allow to save a report of the differences encountered

Feature request. Self-explaining title.

Anyhow, congrats for the tool, @zgrossbart.

Wrong URL in README

The jsonlint.com link in the README goes to jsondiff.com instead.

Collapse (hide) same lines

Hi thanks for the diff tool! It would be great if, when there are a ton of exactly same lines, they can be folded, such that the diff is much shorter. For example, SmartGit has something like:

Improve styling by using stronger colours and monospaced font

Colours are very faint and this doesn't aid comparison. Stronger colours could make the differences be more visible. Try using font colours instead of just background colours.

Monospaced font would also aid comparison as all characters are of the same width.

Doesn't understand insertion/deletion in the middle of a list

Left: [1,2,3,4]
Right: [1,2,4]

Expected outcome:

• Missing element 2 from the array on the right side

Actual outcome:

• Both sides should be equal numbers [ed: element 2]
• Missing element 3 from the array on the right side

Improve responsiveness with big JSON files

I have fairly big Json Files with a lot of sensor measurement data , that i need to compare.

Unfortunately, the comparison blocks the main thread for so long, that chrome thinks, the website has crashed.

2 Solutions:

• Send the JSON content to a server for diffing - maybe not wanted due to privacy and cost issues
• Use a WebWorker - Makes Browser Client Multi-threaded Workloads possible and is supported by ALL major browsers now (even IE/ Edge!) - see https://caniuse.com/#search=webworker

Issue with certain json data

Hi there, I think I found an issue, when I compare this 2 JSON I don't get a the differences

Here is the info I enter (the only difference is line 15 ".ssh/": true,)

Here is the first file

{
  "editor.tabSize": 2,
  "standard.enable": true,
  "standard.autoFixOnSave": true,
  "files.trimFinalNewlines": true,
  "standard.engine": "ts-standard",
  "files.insertFinalNewline": true,
  "editor.detectIndentation": false,
  "javascript.validate.enable": false,
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/package-lock.json": true
  },
  "files.exclude": {
    ".vscode/": true,
    "**/.DS_Store": true,
    "**/.directory": true,
    "**/desktop.ini": true,
    "**/node_modules/": true
  }
}

Here is the second one

{
  "editor.tabSize": 2,
  "standard.enable": true,
  "standard.autoFixOnSave": true,
  "files.trimFinalNewlines": true,
  "standard.engine": "ts-standard",
  "files.insertFinalNewline": true,
  "editor.detectIndentation": false,
  "javascript.validate.enable": false,
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/package-lock.json": true
  },
  "files.exclude": {
    ".ssh/": true,
    ".vscode/": true,
    "**/.DS_Store": true,
    "**/.directory": true,
    "**/desktop.ini": true,
    "**/node_modules/": true
  }
}

Here is what is displayed in console

Support data URLs

It'd be great to support data URLs, e.g.:

https://jsondiff.com/?left=https://jsondiff.com/two.json&right=data:base64,eyJBaWRhbiBHaWxsZW4iOiB7ImFycmF5IjogWyJHYW1lIG9mIFRocm9uXCJlcyIsIlRoZSBXaXJlIl0sInN0cmluZyI6ICJzb21lIHN0cmluZyIsImludCI6IDIsImFib29sZWFuIjogdHJ1ZSwgImJvb2xlYW4iOiB0cnVlLCJvYmplY3QiOiB7ImZvbyI6ICJiYXIiLCJvYmplY3QxIjogeyJuZXcgcHJvcDEiOiAibmV3IHByb3AgdmFsdWUifSwib2JqZWN0MiI6IHsibmV3IHByb3AxIjogIm5ldyBwcm9wIHZhbHVlIn0sIm9iamVjdDMiOiB7Im5ldyBwcm9wMSI6ICJuZXcgcHJvcCB2YWx1ZSJ9LCJvYmplY3Q0IjogeyJuZXcgcHJvcDEiOiAibmV3IHByb3AgdmFsdWUifX19LCJBbXkgUnlhbiI6IHsib25lIjogIkluIFRyZWF0bWVudCIsInR3byI6ICJUaGUgV2lyZSJ9LCJBbm5pZSBGaXR6Z2VyYWxkIjogWyJCaWcgTG92ZSIsIlRydWUgQmxvb2QiXSwiQW53YW4gR2xvdmVyIjogWyJUcmVtZSIsIlRoZSBXaXJlIl0sIkFsZXhhbmRlciBTa2Fyc2dhcmQiOiBbIkdlbmVyYXRpb24gS2lsbCIsIlRydWUgQmxvb2QiXX0=

See also: https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls

Comparison fails if the key on the left side has an array value while the right side has `null` value

The comparison fails when the value for a key on the left side is an array and the value for the same key on the right is null. Might also fail for other comparisons where the type on the right does not have a length attribute. Haven't checked that.

It works fine if you switch sides. That is, put the JSON for the left side in the example below on the right and vice versa.

An example:
Left side:

{ "akey": [] }

Right side:

{ "akey": null }

Proper LCS

In contrast to the typical diff implementations for text files (gnu diff anyway), JSON Diff doesn't mind giving a longer-than-necessary list of changes. For example:

[ "1", "2", "1" ] <-> [ "1", "1" ]

If the elements where lines then gnu diff would tell me that this is one insertion, and not one modification plus one insertion.

I'm sure that by giving only the smallest diff for arrays, you get a much neater diff.

The implementation requires implementing the LCS (largest common subsequence) algorithm, which is the dual problem of finding the shortest diff.

Note that I personally don't need this right now, but I thought it worth giving this bit of input.

In any case, I too think structured diffing, in particular for JSON, is a cool thing.

enhancement:add panel customize my own color style

Need to show the difference in values if `X unequal value` checked.

Great Tool!!

I have a suggestion, If user unchecked X unequal value check box, no need to show the difference in values in right side listing

jQuery Load failed

http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
net::ERR_ABORTED 502 (Bad Gateway)

Please update it. Thank you!

https://unpkg.com/[email protected]/dist/jquery.js

Add ghost placeholders for missing properties

List on the right shows textual information about missing properties in one column or another.

It would be better if this data was used to put ghost placeholders of the same height as the information present where the information is missing. Textual warnings would then not be needed.

This would aid comparison as equal and equivalent information would end up side by side. Diffmerge is an example of a comparison tool that does this well.

Enhancement: Download remote JSON files from the browser

Enabling the website to download remote JSON from the browser itself would allow the site to work completely offline. The site can also be hosted statically instead of requiring a PHP server. I would like to work on it if it is okay.

Does not detect differences for very large integers

Comparing

[10176718226607830673]

with

[10176718226607831000]

reports that they are the same.

Feature: Add option to get the JSON from a URL

Add two textboxes for URLs for each side under the "upload" button, and when one clicks compare, it simply fetches the JSON from the url instead of the user having to input it by himself. would save a lot of time for that use case.

Quotes not escaped correctly in difference output

More than one escaped quote in a string value will not keep its escape character in the output.

An example of a json value that will provide invalid JSON in the output:
"link": "<a href=\"http://google.com/\">Google</a>"
The second escape character '\' is dropped.

`null` values are not properly compared

Diffs are not detected if the first JSON has a null value, but the second JSON has something else. Diffs are generated the other way around though.

An example:

Left JSON:

{"a":null, "b":"xyz", "c":null}

Right JSON:

{"a":null, "b":null, "c":123}

There are two diffs here, "b" and "c". But only "b" is detected.

Push Image to Dockerhub?

I love using jsondiff! It would be super convenient to just run docker run -i --name jdd -p 127.0.0.1:8080:80/tcp jdd:v1-alpine and start it locally for sensible data.

For this to work, the image obviously must be available on a public registry like dockerhub.

Would you be willing to push the latest version there? Would be easier maintenance-wise if the maintainers did this, instead of someone from the community.

HTTPS?

I assume that http://www.jsondiff.com/ is hosted on GitHub Pages? Starting from May 1^st, custom domain also works with HTTPS.

Query String Parameters

The second way is to add parameters to the URL like this:

http://jsondiff.com/?left=http://jsondiff.com/one.json&right=http://jsondiff.com/two.json
Originally posted by @zgrossbart in #10 (comment)

I came here to try and find out about this and thankfully found this in a closed issue eventually. It would be great if this was better signposted, ideally on the webpage somewhere or at least in the README.

Perhaps with the stereotypical share button if both sides are URLs? I assume you'll hit get query string limits if they're raw text.

THIS IS AMAZING

I'm consuming an API with a super complex response body and was writing an email to the supplier asking about a change in it, and I installed jdd and ran it and it ran and it was fast and looked great!

e.g.

Thanks for your great work.

Enhancement: Add option to ignore array order

This is for situations where the order of elements in an array has no semantic meaning.
Example 1.
{
"image1": {
"filesize":123456,
"filename":"image1.jpg",
"tags":["tech", "iphone"]
},
"image2": {
"filesize":987654,
"filename":"image2.jpg",
"tags":["nature", "california", "yosemite"]
}
}
AND
{
"image1": {
"filesize":123456,
"filename":"image1.jpg",
"tags":["iphone", "tech"]
},
"image2": {
"filesize":987654,
"filename":"image2.jpg",
"tags":["yosemite", "nature", "california"]
}
}

Example 2. (more complex version of example above)
{
"image1": {
"filesize":123456,
"filename":"image1.jpg",
"tags":[{"tech":[1, 2]}, {"iphone":[3, 4, 5]}]
},
"image2": {
"filesize":987654,
"filename":"image2.jpg",
"tags":["nature", "california", "yosemite"]
}
}

{
"image1": {
"filesize":123456,
"filename":"image1.jpg",
"tags":[{"iphone":[5, 3, 4]}, {"tech":[2, 1]}]
},
"image2": {
"filesize":987654,
"filename":"image2.jpg",
"tags":["yosemite", "nature", "california"]
}
}

Enhancement: Make new diff button sticky

Currently, the button to start a new diff is only available at the top of the page, requiring scrolling upwards to access it. If I'm halfway down a giant diff, scrolling upwards is rather annoying. There's plenty of room in the sidebar for the button. Can it be put there?

I realize this is a pretty simple change, and I might just do it myself after I get home from work today.

JsonDiff - NPM Package

Hello ,
Let me know JsonDiff have npm package to compare 2 json objects

Regards,
Mahendra Balu

Clear Button for JSON input

Awesome service but there's no button to clear the input.

When running from Docker container, auto-loading of JSON does not work

To reproduce:

1. run jdd in Docker
2. try URL http://localhost/left=http://jsondiff.com/one.json&right=http://jsondiff.com/two.json

Expected result:

• The contents of one.json and two.json will be compared

Actual result:

• File names instead of file contents appear in left and right panels
• Compare progress meter is shown and never finishes

Fails for huge JSON documents

I tried to compare
https://raw.githubusercontent.com/powdahound/ec2instances.info/f34075aa09c52233735cd879ebda3f70d77b7ca5/www/instances.json
with
https://raw.githubusercontent.com/powdahound/ec2instances.info/ac8f6729ba24df485e42395941045d827be2a67d/www/instances.json

It reports the files as identical (they ovbiously aren't), and the following error shows up in the JS Console:
jdd.js:387 Uncaught Unable to find line number for(The right side of this object has more items than the left side): ///60

Enhancement : filter Left / Right side missing properties

Hello !

I use jdd to compare a JSON file generated by 2 version of the same API, and find regression bugs.

It could be verry effective to filter only the diff flagged by a side.

In my use case, I don't focus on :

• unequal values : theses can be whatever they want.
• missing properties from Left side : theses are the improvments of my new API version.

All I need to see is a list of

Missing property PPP from the object on the right side

In a second step, filter by "Left Side" can help focus on the new functionality of my API, without having to reload the JSONs.

Thanx for your usefull app,
Romain

jsondiff.com broken by ezoic

http://jsondiff.com seems to be broken by ezoic script addition. The site loads fine but then as soon as the ezoic script is loaded, it goes blank.

How to use JDD in Angular

Hello,

Let me know if there is way to use JDD library in Angular

Regards,
Mahendra Balu

web app getting hanged for very large files

Awesome App !! made my life easy :D

Just One issue: web app getting hung for very large files

tried both http://www.jsondiff.com/ and on local host as well.
The browser stopped responding after uploading and clicking on Compare button. can not upload the file as it contains sensitive info

Maintain all object differences in same level

Can we compare objects on both sides within same level like below image

Is it possible to do like that by doing some changes?

If objects are of different sizes, then heights of JSONS will be different and while rendering u can see like

JSONDiff will output invalid JSON if the original JSON has escape characters

Give JSONDiff the following documents:

a.json:

1. {
2.   "comment": "a\nb",
3.   "xcheck": true
4. }

b.json:

1. {
2.   "comment": "a\nb",
3.   "xcheck": false
4. }

This should result in a diff on line three because the two values of the xcheck property don't match. It should also result in the entire value of comment property on a single line.

Instead JSONDiff will unescape the new line character with a resulting output that looks like this:

1. {
2.     "comment": "a
3. b",
4.     "xcheck": false
5. }

JSONDiff will also report the difference is still on line three which is now incorrect. This is also invalid JSON since JSON strings don't allow unescaped new line characters which is why this character was escaped in the first place.

JSONDiff should show output that looks like this:

1. {
2.     "comment": "a\nb",
3.     "xcheck": false
4. }

It should also still report the diff at line three.

This should work the same way for all of the well known escape characters in the JSON specification. It should also handle escape characters in JSON property names as well as values.

Update the copyright year

Corrupts the global namespace, hard to inject multiple instances in page

toogle filter should reduce the right navigation

When we toogle a filter with the checkbox the right navigation dont changes, keep all diffs finded.