How to use it
- Paste JSON into the box. The tree appears at once; a syntax error shows the line and column.
- Click ▸ and ▾ to open and close objects and arrays, or use Expand all and Collapse all.
- Type in the search box to outline every key or value that contains the text.
- Click a node to see its JavaScript path, JSON Pointer and value, each with a copy button.
How it works
Each line of the tree is one node: its key (or index in an array), then the value. Objects show the number of keys and arrays the number of items, so you can see the size of a branch before opening it. Strings are shown with their quotes, as in JSON.
Paths are built from the keys on the way down from the root. A key that is a valid JavaScript name is written with a dot (.customer); any other key goes in brackets with quotes ([“first-name”]), and array items use their index ([0]).
Worked example
In the sample order, open items, then the first item, and click sku. The tool shows:
- JavaScript path:
$.items[0].sku - JSON Pointer:
/items/0/sku - Value:
"A-1"
Searching for true outlines customer.vip, and searching for gift outlines the first item of tags.
Tips
- Use the JSON Pointer in JSON Patch operations and in $ref of JSON Schema; use the JavaScript path in code or in JSONPath-style tools.
- If you need to reshape the data, format it with the JSON formatter or flatten it with the JSON flattener.
- Collapse all, then open only the branch you are working on: long arrays are easier to read that way.