How to compare two JSON objects

By

Compare two JSON objects in the browser and see every added, removed, changed, or moved field by path. Key order and indentation are ignored.

~~~

Free toolThis tutorial uses the JSON Diff. It runs in your browser, so open it in another tab and follow along.

To compare two JSON objects, parse both and walk them by key. A line diff will flag a reordered key and a change in indentation. A structural diff will not.

We’ll use the JSON diff tool. You paste the two values, or open a file on each side. Both stay in the browser. Nothing is written to the URL.

Compare the sample

  1. Open JSON diff.
  2. Click Load sample. The left and right boxes fill with two small plan objects.
  3. Read the difference lines. Copy or download them if you want to keep the list.

The left side is:

{
  "plan": "free",
  "seats": 1,
  "features": ["blog", "rss"]
}

The right side writes seats before plan, changes both values, and adds one feature:

{
  "seats": 3,
  "plan": "pro",
  "features": ["blog", "rss", "courses"]
}

The page reports three lines:

$.plan changed from "free" to "pro"
$.seats changed from 1 to 3
$.features[2] added "courses"

The key order is not a fourth line. Swap the keys on two otherwise equal objects and the page says there are no differences.

How two JSON values are comparedPaste JSON on both sides. If either side fails JSON.parse, the error names that side. If both parse, objects are compared by key, id-like arrays can report a move, and every other array is compared by index.NoYesObjectArray of objects with aunique idAny other arrayPaste JSON on bothsidesDoes each sideparse?Name the side thatfailedWhat is the value?Compare keys, ignorekey orderMatch items andreport movesCompare by indexList added, removed,and changed paths

How a line is written

Each line is one path plus what happened there.

KindMeaning
changedThe path exists on both sides and the values differ
addedThe path exists only on the right
removedThe path exists only on the left
movedAn object in an array changed index, matched by id

A missing key is not the same as null. Adding "seats": null on the right is $.seats added null. The number 1 and the string "1" are a change: $.seats changed from 1 to "1".

A path uses a dot for a key made of letters, digits, and underscores. Any other key is written in brackets. A nested key with a space comes out as $["user name"].plan.

A value longer than 160 characters is cut in the line, with an ellipsis. The page lists the first 400 lines. Each file can be up to 2 MB.

Arrays

Arrays of objects are matched by id, _id, key, slug, or name, in that order. That happens only when every item on a non-empty side is an object with that field, and the values are unique.

This left side:

[
  {"id": "post-1", "title": "Tokens"},
  {"id": "post-2", "title": "cURL"}
]

against this right side:

[
  {"id": "post-2", "title": "cURL"},
  {"id": "post-1", "title": "Tokens and cost"}
]

is reported as:

$[id="post-1"] moved from index 0 to index 1
$[id="post-1"].title changed from "Tokens" to "Tokens and cost"
$[id="post-2"] moved from index 1 to index 0

An array of strings has no id field, so it is compared by index. ["blog", "rss"] against ["rss", "blog"] is two changes, not a move. Duplicate ids also fall back to index order.

When a side will not parse

Both sides have to be JSON that JSON.parse accepts. An empty side asks you to paste JSON there. A broken side is named: the error starts with Left side: or Right side:.

Integers above 9007199254740991 are rounded by JavaScript before the comparison. Two different ids can look equal. The page adds a note when it sees one.

If you want the tree instead of the difference list, open the JSON tree visualizer. A value that is already valid and only needs formatting goes to the JSON formatter. For a text diff of two source files, the diff checker compares the lines as text. The jq command is the terminal tool for filtering JSON. Node’s test runner uses assert.deepEqual when the check lives in a test.

Try the JSON Diff

Compare two JSON values in your browser and see every added, removed, changed, or moved field with its path. Key order is ignored.

Open the JSON Diff →

  • Diff Checker: Compare two text blocks line by line — unified or side-by-side view, ignore-whitespace option, change stats.
  • JSON Tree Visualizer: Explore JSON as a searchable, collapsible tree with paths, details, and statistics.
  • JSON Formatter & Validator: Validate, pretty-print, and minify JSON with clear error messages. Runs entirely in your browser.

More tool tutorials →

Want me to talk about your product? You can sponsor this site.