Navigating & Inspecting Hierarchical JSON Structures
Modern enterprise APIs and microservices frequently return complex, deeply nested JSON responses containing thousands of nodes. Reading raw unformatted text or even indented text with 20+ levels of nesting causes severe cognitive fatigue.
An interactive AST Tree Viewer transforms linear text into an expandable visual hierarchy. This enables engineers to rapidly isolate specific subtrees, collapse unneeded branches, identify data types, and copy precise object paths without manually counting array indices or matching closing braces.
01. High-Density Type Indicators & Node Semantics
FormJson decorates every hierarchical node with high-contrast type badges to enable instant visual scanning:
02. JSONPath Extraction Syntax & Querying Cheat Sheet
JSONPath (RFC 9535) provides a standardized query expression syntax to pinpoint, filter, and extract nested elements across heterogeneous JSON models:
| Operator | Description | Expression Example | Result Match |
|---|---|---|---|
| $ | Root object or array | $ | The entire JSON document |
| .key or ['key'] | Child property selector | $.store.book | Selects child object 'book' |
| .. | Recursive descent (deep search) | $..price | Extracts all 'price' keys across all depths |
| [*] or [0:5] | Array wildcard or slice range | $.data.items[0:3] | First 3 elements in the items array |
| [?(@.field < val)] | Filter predicate expression | $..books[?(@.price < 10)] | All books with price less than 10 |
03. Programmatic Tree Traversal & Path Extraction
Building custom tools or automated ETL pipelines requires traversing AST trees to flatten objects or extract specific paths:
// Recursively flatten nested JSON into a dot-notated key-value map
function flattenJsonPaths(obj, prefix = "$") {
const result = {};
function traverse(current, currentPath) {
if (current !== null && typeof current === "object") {
if (Array.isArray(current)) {
current.forEach((item, idx) => traverse(item, currentPath + "[" + idx + "]"));
} else {
Object.entries(current).forEach(([k, v]) => traverse(v, currentPath + "." + k));
}
} else {
result[currentPath] = current;
}
}
traverse(obj, prefix);
return result;
}
const payload = { store: { name: "Central", items: [{ id: 101, sku: "A-9" }] } };
console.log(flattenJsonPaths(payload));# Recursively find all values for a target key at any depth
def find_all_keys(data, target_key):
matches = []
if isinstance(data, dict):
for k, v in data.items():
if k == target_key:
matches.append(v)
matches.extend(find_all_keys(v, target_key))
elif isinstance(data, list):
for item in data:
matches.extend(find_all_keys(item, target_key))
return matches
sample = {"api": {"v1": {"token": "secret_1"}, "v2": [{"token": "secret_2"}]}}
print(find_all_keys(sample, "token")) # ['secret_1', 'secret_2']