blitlabs / online-json-diff Goto Github PK

The tool shows deletions/additions to be made from the text in the textarea on the left to match the text in the textarea on the right.
There should be a swap button to swap the text in the two textareas.

Option to sort keys will really be a useful feature to have. Thanks for this awesome project.

Clicking the gear icon to get to the settings (e.g. to persist to local storage, select theme and to download diff) displays a menu which is not clickable. It disappears before user is able to make a selection.
Observed in Chrome 60 and Firefox 55 on El Capitan.

When working with large json docs this is important.

Array items from index 2 to 11 are highlighted yellow when only 2nd of 11 items is different.
OK if total items are not 11.

Sample JSON:
{
"organizationName": ["TestAuto_OrgName_001","TestAuto_OrgName_002"],
"phyHCSName":["TestAuto_PhysHCS_001","TestAuto_PhysHCS_002","TestAuto_PhysHCS_003","TestAuto_PhysHCS_004",
"TestAuto_PhysHCS_005","TestAuto_PhysHCS_006","TestAuto_PhysHCS_007","TestAuto_PhysHCS_008",
"TestAuto_PhysHCS_009","TestAuto_PhysHCS_010","TestAuto_PhysHCS_011"],
"serviceName":["TestAuto_Service1","TestAuto_Service2","TestAuto_Service3", "TestAuto_Service4",
"TestAuto_Service5","TestAuto_Service6","TestAuto_Service7","TestAuto_Service8",
"TestAuto_Service9","TestAuto_Service10","TestAuto_PCS_Routine11"]
}

It looks like the diff algorithm here doesn't compare values strictly, A minimal example is:
{"t":"0"} is not different from {"t":false}

I guess in many javascript-y cases it's not a problem to consider "0" the same as false (or many other comparisons, for that matter), but should this online diff do a !== comparison in the json-patch code here ?

Use case: json strings passed between javascript and non-javascript. If you compare json with json-diff.com and see that there are no changes in the json, while there strictly are changes that the non-javascript backend sees and errors on.

npm install works like a charm but npm start gives this error:

npm start

[email protected] start C:<MY PATH>\json-diff
./node_modules/serve/bin/serve .

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ./node_modules/serve/bin/serve .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script './node_modules/serve/bin/serve .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the online-json-diff package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./node_modules/serve/bin/serve .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs online-json-diff
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls online-json-diff
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:<MY PATH>\json-diff\npm-debug.log
npm-debug.txt

Use webpack to combine javascript files and separate into modules.

非常感谢
3Q
很有用！

It would be awesome to have matching braces/brackets/parenthesis highlighted when you've got one selected.

Another options, possibly overkill, would be to have the entire block you are in highlighted somehow.

I'm not sure if this behavior is conforming to standard, but during development one may expect to also see in JSON diff that value type is not matched.

Example:

a.txt
b.txt

I would like to highlight the json syntax. Is there a way to achieve this?

It would be better if you make a chrome app.

Great work here!

Please can we generate a diff file?

It would be useful if we could get a valid JSON result that has just the change set

Again, great work.

Thanks

Hi there,

Just found out that if we are trying to scroll with the mouse, it looks like the scroll position is replaced so it becomes way slower to scroll.

I don't know if this is wanted, but I would prefer the scroll to have it's default behavior (when like you drag the scroll handle)

Use SSL

Short description: Parsing a json, where there escape string of \" occours, makes everything after that string ignored in diff.

Example:
Having a diff of:

{
  "a": "The text with special \" character",
  "b": "x"
}

vs

{
  "a": "The text with special \" character",
  "b": "y"
}

we see the "b" is obviously different.

However I can see that the diff parsing "dies" right after the "a" field, and never shows a difference for "b". No highlight or anything indicating a change in "b" is being displayed.

Attached screenshot:

If I remove the \" from field "a", it displays correctly:

Additional info:
When testing the diff on big json files, I can see everything works perfectly up to the first occurrence of \" string. Then no other diff is displayed.

Use timeago for history dates.

Hi!
It is not mars json as invalid if duplicate field in it:

{
  "id":1,
  "required": false,
  "required": true
}

But should mak this json as invalid

I see some performance issues with larger JSON files. E.g. comparing https://gist.github.com/kdeenanauth/7d785949543b0c4446f89e8b31c82ab7 to https://gist.github.com/kdeenanauth/7e7c83e973483510919c3de478f1fd56

Still works though! Thanks!

Sometimes I just want to look at two jsons side-by-side

Is it possible to use my own textarea instead of creating a new one?
I'm using your library with angular 2 and the textarea which gets created does not get updated when i receive the data from my rest endpoint.

JSON 1.
{ "url": "https://apm-asset-svc-preprod.preprod-app-api.aws-usw02-pr.predix.io/v1/assets", "requestMethod": "GET", "staticHeader": { "Accept": "application/json", "Content-Type": "application/json", "Authorization": "", "tenant": "" }, "dynamicHeader": [ "Authorization", "tenant" ], "requestBodyType": "JSON", "requestBody": [ ], "queryParam": { }, "responseType": "JSON", "responseRootPath": null, "response": [ [ { "name": "name", "xPath": "name", "dataType": "VARCHAR" }, { "name": "uri", "xPath": "uri", "dataType": "VARCHAR" }, { "name": "label", "xPath": "label", "dataType": "VARCHAR" } ] ] }

JSON 2.

{ "url": "https://apm-asset-svc-rc.int-app.aws-usw02-pr.predix.io/v1/tags/query", "requestMethod": "GET", "staticHeader": { "Accept": "application/json", "Content-Type": "application/json", "Authorization": "", "tenant": "" }, "dynamicHeader": [ ], "requestBodyType": "JSON", "requestBody": [ ], "queryParam": { "q": "" }, "responseType": "JSON", "responseRootPath": "", "response": [ { "name": "uri", "xPath": "uri", "dataType": "VARCHAR" }, { "name": "sourceKey", "xPath": "sourceKey", "dataType": "VARCHAR" }, { "name": "name", "xPath": "name", "dataType": "VARCHAR" }, { "name": "monitoredEntityUri", "xPath": "monitoredEntityUri", "dataType": "VARCHAR" }, { "name": "timeseriesLink", "xPath": "reservedAttributes.timeseriesLink", "dataType": "VARCHAR" } ] }

Now if i use JSON diff it only shows differences in url and responseRootPath , But if you see the response array there is diff in both jsons which is not shown in tool.

Please see attached image

online-json-diff is great productive tool for developer, expect it can be run with Docker

Certain values are not using a strict equality comparison. Thus resulting in differences not property highlighted.

For example:

{
  "id": "10012",
  "type": 1
}

should not be equal to

{
  "id": 10012,
  "type": true
}

Make panes expandable/collapsable.

Thanks for open sourcing this!

Is there are simple way to run the diff from the command line and generate either a stdout diff or html output diff?

@justspamjustin can i add json formatting feature for this json-diff, it helps a lot ,
i have have did that before for my project.
https://sutharp777.github.io/comet-tail/

JSON 1:
{
"triggerPullConnectors": [
"blabla",
"ddddddd"
]
}

JSON 2:
{
"triggerPullConnectors": [
"blabla11"
]
}

Does not show a difference

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

json1:
{
"users": [
"mike",
"jack"],
"data": [
{
"id": 1,
"name":"mike"
},
{
"id": 2,
"name": "jack"
}
]
}

json2:
{
"users": [
"mike",
"tom"],
"data": [
{
"id": 1,
"name": "mike"
}
]
}

Does not notify about missing attributes between the two objects.

I have create a vuejs example base on your logic can i push my example to your repo?

Better SEO

I followed the instructions in the main page using git bash to initialize the json-diff and I got this error:

$ npm start
> [email protected] start C:\Users\silvalk\Desktop\online-json-diff
> ./node_modules/serve/bin/serve .

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"

So I changed the file package.json in the field start from ./node_modules/serve/bin/serve . to ./node_modules/serve/bin/serve and it worked.

May you change the instruction page to guide Windows users?

Hi Justin,

Justin, can you please add node module for json-diff.

-Thanks.