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".

root: (object)

- - align: center (string)
  - - - content: And please, feel free to send us your feedback and comments to (string)
      - style: (object)
        bold: 2 (number)
        color: FFFFFF (string)
        fontFamily: Arial (string)
        italic: 2 (number)
        name: Arial (string)
        size: 20 (number)
        underline: 1 (number) => 2 (number)
    - - content: hello world (string) => foo (string)
      - style: (object)
        bold: 2 (number)
        color: 4DC3FF (string) => 4DC2FF (string)
        fontFamily: Arial (string)
        italic: 2 (number)
        name: Arial (string)
        size: 20 (number)
        underline: 1 (number) => 2 (number)
    - - content: , or just by clicking on the (string)
      - style: (object)
        bold: 2 (number)
        color: FFFFFF (string)
        fontFamily: Arial (string)
        italic: 2 (number)
        name: Arial (string)
        size: 20 (number)
        underline: 1 (number) => 2 (number)
    - - content: feedback (string)
      - style: (object)
        bold: 2 (number)
        color: 4DC3FF (string) => 4DC2FF (string)
        fontFamily: Arial (string)
        italic: 2 (number)
        name: Arial (string)
        size: 20 (number)
        underline: 1 (number) => 2 (number)
    - - content: button up above. (string)
      - style: (object)
        bold: 2 (number)
        color: FFFFFF (string)
        italic: 2 (number)
        name: Arial (string)
        size: 20 (number)
        underline: 2 (number)
  - depth: 0 (number)
  - list: false (boolean)
  - ordered: false (boolean)
format: example (string)
version: 3 (number) => 3.1 (number)

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

Add New Comment

Logout

	Matěj Cepl
	16 comments 5 likes received

Showing 9 comments

Sort by

278777851

7 months ago

{
"events": {
"list": [
{
"eventObject": {
"@type": "contactlist",
"contacts": [
{
"uri": "tel:+491728881002",
"self": "true",
"state": "active"
},
{
"uri": "sip:491728881001@mns.ericsson....",
"state": "active"
},
{
"uri": "sip:491728881002@mns.ericsson....",
"self": "true",
"state": "active"
},
{
"uri": "sip:491728881003@mns.ericsson....",
"state": "active"
},
{
"uri": "tel:+491728881000",
"state": "pending"
}
]
},
"id": "1b25ae4c-8589-4080-ae4f-3b5e2700fe50",
"destination": "sip:491728881002@mns.ericsson...."
},
{
"eventObject": {
"@type": "presencelist",
"userPresences": [
{
"entity": "tel:+491728881002",
"services": [

],
"self": "true"
},
{
"entity": "sip:491728881001@mns.ericsson....",
"services": [

]
},
{
"entity": "sip:491728881002@mns.ericsson....",
"services": [

],
"self": "true"
},
{
"entity": "sip:491728881003@mns.ericsson....",
"services": [

]
}
]
},
"id": "4076e6c9-341d-4e87-9ce4-1aff56a2865b",
"destination": "sip:491728881002@mns.ericsson...."
},
{
"eventObject": {
"@type": "message",
"from": "sip:491728881001@mns.ericsson....",
"to": "sip:491728881002@mns.ericsson....",
"contentType": "text/plain",
"subject": "testing IM",
"body": "Allo world",
"type": "message"
},
"id": "250a597b-80af-46ac-8783-4965fd014b79",
"destination": "sip:491728881002@mns.ericsson...."
}
]
}
}

Flag

Alex Gorbatchev

11 months ago

what's the license for this code?

Flag

OriginalSyn

11 months ago

This breaks if the value of a property is null, typeof null === 'object', so it will attempt recurse until the stack limit is exceeded

One way to fix it is to do that following:

if (typeA === "object" || typeA === "array" || typeB === "object" || typeB === "array")

to

if ((typeA === "object" && a !== null) || typeA === "array" || (typeB === "object" && b !== null) || typeB === "array")

Flag

nils

11 months ago

the for loop over variables in a object is not that good:
http://erik.eae.net/archives/2...

when using prototype you have to replace in your script:
var keys = [];
for (var i in a) keys.push(i);
for (var i in b) keys.push(i);
keys.sort();

by:

var keys = [];
for (var i in a) if(a.hasOwnProperty(i)) keys.push(i);
for (var i in b) if(b.hasOwnProperty(i)) keys.push(i);
keys.sort();

Flag

tlrobinson

11 months ago in reply to nils

That's true, if something modifies Object.prototype, which nothing in this page does, thus the check isn't necessary in this case.

Flag

james swanson

11 months ago

Awesome tool. Saved me a lot of time.

Suggestion: little summary section to list total adds, removes, and changes.

Flag

Pravin Chikhale1

1 year ago

Really COOL!!! :)

Flag

hurricane flow

1 year ago

awesome solution!

Flag

PragueExpat

1 year ago

Thanks for this tool. It is extremely helpful.

Flag

JSON Diff

About

Known Issues

comment ^

Notifications

Glad you liked it. Would you like to share?

Add New Comment

Showing 9 comments