免費轉換器

JSON 樹狀 檢視器

在互動式可折疊樹中檢視、格式化和探索JSON資料。免費、安全、無需上傳。

拖放JSON檔案到此處

或在下方貼上JSON文字

關於此工具

JSON 樹檢視器將 JSON 資料顯示為可導航的分層樹而不是純文字。每個物件都成為一個可折疊的分支;數組單獨顯示它們的項目;原始值顯示為葉子。結構視圖可以輕鬆地在深層嵌套資料中尋找特定欄位、折疊不相關的子樹以及導航作為平面文字難以管理的大型 JSON 文件。

與格式化的 JSON 文字相比,樹狀視圖更擅長在大數據中導航。 10MB 的 API 回應作為文字滾動是不切實際的,但作為樹很容易處理,您可以折疊不關心的頂級鍵並僅展開感興趣的部分。

此檢視器在瀏覽器中以結構化樹的形式呈現 JSON。搜尋按鍵或值過濾分支。類型感知顯示可區分字串、數字、布林值、null、物件和陣列。

為什麼要使用 JSON 樹檢視器

深度嵌套的資料很難以文字形式導航。設定檔、API 回應和序列化狀態通常具有 5 層以上的嵌套。樹狀視圖可讓您折疊不相關的層級並專注於重要的事情;文字視圖需要仔細捲動和計算括號。

搜尋和過濾功能也很重要。使用搜尋感知檢視器可以快速尋找複雜文件中名為「user_id」的所有鍵;無法用純文字可靠地完成。

使用方法

貼上 JSON,導航樹。

  1. 貼上您的 JSON: 將 JSON 放入輸入區域。檢視器解析並呈現結構化樹。
  2. 展開和折疊: 按一下分支可展開或折疊。對於關注大數據的特定子樹很有用。
  3. 搜尋: 按鍵或值過濾。匹配的分支保持可見;不匹配的被隱藏。
  4. 檢查具體值: 點擊葉子查看其完整值(對於長字串有用)並複製路徑(例如 users.0.profile.email)以在程式碼中使用。

常見用例

技術細節

JSON 解析使用 JSON.parse,它會在無效輸入時失敗,並出現指向問題位置的解析錯誤。有效的 JSON 呈現為 JavaScript 對象,檢視器遞歸地產生樹。

渲染:每一層嵌套都成為一個縮排的分支。物件鍵是標籤;值根據類型呈現 - 帶引號的字串、不帶引號的數字、布林值作為真/假、明確為 null、物件和陣列作為可折疊分支。

效能:非常大的 JSON (10MB+) 會減慢渲染速度。延遲擴展(僅渲染當前可見的分支)會有所幫助。搜尋大型文件可能會花費大量時間;在第一次解析時對樹建立索引會有所幫助。

最佳實踐

常見問題

JSON 樹可以有多深?
沒有人為的深度限制。該工具會渲染出與 JSON 結構一樣深的樹。但是,極深的嵌套(100 多個層級)可能會減慢瀏覽器中的渲染速度。
我可以在 JSON 樹中搜尋嗎?
使用 Ctrl/Cmd+F 搜尋鍵或值。匹配的節點將突出顯示,並且其父節點會自動展開以顯示路徑。
使用什麼 JSON 路徑格式?
此工具使用 JSONPath 點表示法 ($.key.nested.array[0].value)。此格式與 JavaScript 屬性存取和大多數 JSONPath 程式庫相容。
我可以編輯樹中的值嗎?
這是一個用於探索的唯讀檢視器。若要編輯 JSON,請使用我們的 JSON Formatter 工具,該工具提供帶有驗證的可編輯介面。
我的數據上傳了嗎?
不會。解析和渲染發生在您的瀏覽器中。
如何導出樹的一部分?
大多數檢視器為選定的分支提供 JSON 格式的複製。導出的值與僅具有選定鍵的結構相同。
為什麼資料量大時樹會變慢?
許多節點的 DOM 渲染成本很高。延遲擴展(僅渲染可見分支)有幫助;對於非常大的數據,專用工具(jq、code)效率更高。
我可以從 URL 查看 JSON 嗎?
有些檢視器直接取得 URL。其他的需要貼上。 CORS 可能會阻止某些 URL 的跨來源取得。