Przekształcanie pogmatwanego JSON-a w czytelne drzewo interaktywne za pomocą jsontr.ee

Ostatnio parsowałem odpowiedź z zewnętrznego API liczącą kilkaset linii z tuzinem zagnieżdżonych tablic i obiektów. Formatowanie w IDE i znajomy zwijany podgląd w przeglądarce niewiele pomagały: żeby zrozumieć relacje między encjami, musiałem ciągle przewijać w górę i w dół, tracąc kontekst. W takich momentach chce się po prostu zobaczyć cały wykres danych na jednym ekranie.

Trafiłem na kompaktową bibliotekę o nazwie jsontr.ee na GitHubie, stworzoną specjalnie do rozwiązywania tego problemu. Przyjmuje dowolny obiekt JSON i generuje z niego interaktywne drzewo oparte na SVG.

Co potrafi biblioteka

Repozytorium The-01-Company/jsontr.ee zawiera lekki skrypt JavaScript bez ciężkich zależności. Jego głównym celem jest szybkie renderowanie hierarchii danych jako diagramów z węzłami i połączeniami.

Biblioteka ma kilka przydatnych funkcji:

• Automatyczne pozycjonowanie węzłów. Skrypt rozkłada bloki tak, żeby nie nakładały się na siebie.
• Pełna obsługa zagnieżdżania. Obiekty wewnątrz tablic i złożone struktury otrzymują czytelne etykiety nadrzędne.
• Czysty wektorowy wynik SVG. Grafika skaluje się bez utraty jakości przy każdym powiększeniu.
• Elastyczne dostosowywanie wyglądu poprzez parametry lub zwykły CSS.

Oprócz samej biblioteki JS autor udostępnił funkcjonalność jako rozszerzenie Visual Studio Code o nazwie JSON Tree Visualizer. Więc do szybkiej analizy plików niekoniecznie trzeba integrować cokolwiek z własnym projektem.

Szybki start w kodzie

Podłączenie biblioteki jest proste. Nie potrzeba skomplikowanych konfiguracji builda — wystarczy dołączyć plik skryptu na stronie.

<script src="path/to/jsontr.ee.js"></script>

Następnie deklarujemy kontener w markupie:

<div id="json-tree"></div>

I przekazujemy dane do funkcji generateJSONTree:

const jsonData = {
    name: "Lou Alcalá",
    projects: [
        {
            name: "JSONtr.ee",
            description: "JSON Formatter, Validator & Viewer Online",
            url: "https://jsontr.ee"
        },
        {
            name: "PixSpeed.com",
            description: "Image compressor",
            url: "https://pixspeed.com"
        }
    ]
};

const container = document.getElementById('json-tree');
container.innerHTML = generateJSONTree(jsonData);

Funkcja zwraca gotowy ciąg znaczników SVG, który natychmiast wstawiamy przez innerHTML.

Stylowanie

Wygląd wykresu łatwo dostosować do palety kolorów twojego interfejsu. Istnieją dwa podejścia do personalizacji.

Pierwsza opcja to przekazanie obiektu konfiguracyjnego jako drugiego argumentu:

const options = {
    arrowColor: "#475872",
    nodeBorderColor: "#475872",
    nodeBackgroundColor: "#f6f8fa",
    keyColor: "#b16b2a",
    valueColor: "#008000",
};

container.innerHTML = generateJSONTree(jsonData, options);

Druga metoda to stylowanie przez CSS. Ponieważ wynik to standardowy SVG, możesz stosować zwykłe selektory do jego elementów:

rect {
    fill: #ffffff !important;
    stroke: #1e293b !important;
    stroke-width: 2px !important;
}

To podejście przydaje się, gdy trzeba zaimplementować ciemny motyw lub dynamicznie zmieniać stylowanie przez klasy.

Używanie w VS Code

Jeśli nie planujesz budować interfejsu webowego i tylko potrzebujesz analizować logi i zrzuty danych, wygodniej jest zainstalować wtyczkę edytora:

1. Otwórz panel Rozszerzeń w VS Code (Ctrl+Shift+X lub Cmd+Shift+X).
2. Wpisz JSON Tree Visualizer w wyszukiwaniu.
3. Kliknij przycisk Zainstaluj.
4. Otwórz żądany plik JSON i wywołaj polecenie Visualize JSON as Tree przez Command Palette.

Po tym edytor otworzy interaktywny diagram w następnej zakładce.

Praktyczne scenariusze

Gdzie ta wizualizacja naprawdę oszczędza czas:

• Debugowanie złożonych ładunków webhooków i integracji.
• Tworzenie wewnętrznej dokumentacji API dla kolegów lub klientów.
• Szkolenie młodszych programistów do czytania struktur danych drzewiastych.
• Wizualizacja plików konfiguracyjnych z głębokim poziomem zagnieżdżenia.

Skrypt nie jest obciążony niepotrzebnymi abstrakcjami, więc łatwo go osadzić w wewnętrznym panelu administracyjnym lub dashboardzie monitoringu.

Podsumowanie

Biblioteka jsontr.ee robi dokładnie jedną rzecz: szybko i czysto przekształca JSON w czytelny diagram SVG.

Dokumentacja w repozytorium jest wciąż zwięzła, ale sam kod jest przejrzysty i nie wymaga szukania odpowiedzi. Jeśli regularnie musisz wyjaśniać struktury danych kolegom albo po prostu masz dość przewijania ścian tekstu podczas debugowania API, ten tool zdecydowanie warto dodać do zakładek. Kod źródłowy jest otwarty na licencji MIT w The-01-Company/jsontr.ee na GitHubie.