JSON树形查看器 - 交互式可视化JSON数据 在线
将JSON可视化为交互式树结构。展开、折叠、搜索节点、复制JSON路径 — 100%客户端处理，数据不发送到服务器。
常见问题
什么是JSON树形查看器？
JSON树形查看器是一个在线工具，它解析JSON数据并将其显示为交互式层次树结构。您可以通过展开和折叠节点来可视化地探索嵌套的对象和数组，而不是阅读带有括号和花括号的原始文本。每种数据类型都有颜色编码以便即时识别。
如何使用这个JSON树形查看器？
在左侧输入区域粘贴JSON数据（或上传.json文件）。树形视图会自动在右侧渲染。点击三角图标展开或折叠节点，使用深度按钮（1、2、3、全部）控制树的深度，使用搜索栏查找特定的键或值。
我的数据安全吗？会发送到服务器吗？
所有JSON解析和树形可视化均使用浏览器原生JSON.parse()在客户端100%完成。没有任何数据被传输到服务器、存储在数据库中或记录在任何地方。可以安全地用于敏感的API响应、生产数据和机密配置。
什么是JSONPath？路径复制如何工作？
JSONPath是JSON的查询语言，类似于XML的XPath。它提供了引用JSON结构中特定元素的方式（例如$.data.users[0].name）。点击树中的任何节点可在面包屑栏中查看其完整JSONPath，并一键复制。
此工具能处理的最大JSON大小是多少？
此工具可以处理最大5MB的JSON文件。小于1MB的文件解析几乎是即时的。使用深度按钮从折叠视图开始，只展开需要的部分。
这与JSON Formatter工具有什么不同？
JSON Formatter专注于文本操作——格式化、美化和压缩JSON文本。JSON Tree Viewer专注于视觉探索——将JSON渲染为带有展开/折叠、搜索和路径复制功能的交互式树。两个工具互为补充。
可以搜索特定的键或值吗？
可以。搜索栏同时搜索键和值。匹配的节点会被高亮显示，父节点自动展开以显示匹配项，匹配计数器显示结果。使用上一个/下一个按钮在匹配项之间导航。
支持哪些JSON数据类型？
支持所有标准JSON数据类型：字符串（绿色）、数字（橙色）、布尔值（紫色）、null（灰色斜体）、对象（可展开并显示键数）和数组（可展开并显示项数）。每种类型都有独特的颜色编码。
代码示例
// Build a tree from JSON and search it
function buildJsonTree(data, key = '$', path = '$', depth = 0) {
const node = { key, path, depth, type: getType(data) };
if (data === null) { node.value = null; return node; }
if (Array.isArray(data)) {
node.children = data.map((item, i) =>
buildJsonTree(item, `[${i}]`, `${path}[${i}]`, depth + 1));
return node;
}
if (typeof data === 'object') {
node.children = Object.entries(data).map(([k, v]) =>
buildJsonTree(v, k, `${path}.${k}`, depth + 1));
return node;
}
node.value = data;
return node;
}
function getType(v) {
if (v === null) return 'null';
if (Array.isArray(v)) return 'array';
return typeof v;
}
const json = { name: 'John', tags: ['dev', 'js'] };
const tree = buildJsonTree(json);
console.log(JSON.stringify(tree, null, 2));