jsontree — u_pbt_jsontree #

← Référence des composants · Sommaire du guide

jsontree affiche une valeur JSON comme un arbre repliable, coloré par type : un écran de configuration, une réponse d'API, un débogage d'intégration. Vous posez le texte JSON dans is_json, le composant le montre ; un clic sur un nœud rapporte son chemin (ue_node_clicked), un JSON invalide lève ue_error. Il ne modifie rien : c'est un VISUALISEUR.

▶ Le voir en vrai — Application de démonstration, tuile JSON tree, avec le code et cette page côte à côte.

En bref #

Démarrage rapide #

// Show an API response as a tree
uo_json.is_json = inv_rest.of_response_text()

// Fold everything, then let the user open what interests them
uo_json.of_collapse_all()

// ue_node_clicked : the path of the node clicked ("lines/1/sku"), the path of
// n_pbt_json -> of_get_string(as_path) on the same text reads its value

Propriétés #

Méthodes #

Événements #

Exemple #

Explorer la réponse d'une API #

// Fetch the order : the tree shows the response, or empties on a failure
if inv_rest.of_get(/*url*/ "https://api.example.com/orders/4152") = 200 then
	uo_json.is_json = inv_rest.of_response_text()
	uo_json.of_collapse_all()          // the reader opens what interests them
else
	uo_json.of_clear()
end if

Lire la valeur d'un nœud cliqué #

// Instance variable of the window : the response, parsed ONCE by n_pbt_json
n_pbt_json inv_doc

// When the response arrives : the tree shows it, n_pbt_json parses the same text once
uo_json.is_json = inv_rest.of_response_text()
inv_doc.of_load(/*json*/ inv_rest.of_response_text())

// ue_node_clicked of uo_json : the value at the clicked path, nothing parsed again
st_value.text = inv_doc.of_get_string(/*path*/ as_path)

// or, without a second parser : the value of the selected leaf, decoded
st_value.text = uo_json.of_selected_text()

Chercher des mots entiers, casse comprise #

// Whole words only, with the same case : "id" is not found inside "user_id"
uo_json.ib_find_match_case = true
uo_json.ib_find_whole_word = true
uo_json.of_search(/*query*/ "id")

Garder les plis quand la réponse est rafraîchie #

// Local variables
string ls_layout

// The folds, the selected node and the line at the top, kept before the new text
ls_layout = uo_json.of_get_layout()
uo_json.is_json = inv_rest.of_response_text()

// The same blocks fold again ; a path the new text no longer has is ignored
uo_json.of_set_layout(/*layout_json*/ ls_layout)

Un menu sur un nœud #

// ue_node_rclicked of uo_json : the node is selected, open YOUR menu at that point of the screen
uo_menu.of_show(/*x*/ al_x, /*y*/ al_y)

// ue_item_selected of uo_menu : copy the value, or the path for n_pbt_json
choose case as_keys
	case "copy"
		uo_json.of_copy()
	case "copypath"
		uo_json.of_copy_path()
end choose

Bonnes pratiques #

• C'est un visualiseur, pas un éditeur : il montre le JSON, il ne le change pas. Pour lire une valeur, donnez le chemin de ue_node_clicked à n_pbt_json.of_get_string sur le même texte, ou lisez of_selected_text.
• Un gros JSON reste fluide : seules les lignes à l'écran sont dessinées, une réponse de plusieurs centaines de Ko se parcourt au clavier sans attente. of_collapse_all d'abord reste le plus lisible.
• Un JSON invalide ne casse rien : ue_error le dit (avec la ligne et la colonne de la faute), l'arbre reste vide. C'est le retour à montrer, pas un plantage.
• Toute clé a un chemin : un / ou un ~ s'y écrit ~1 ou ~0 (JSON Pointer), et n_pbt_json le lit ainsi — paths/~1users~1{id} pour une spécification OpenAPI. Une clé VIDE est un niveau vide (a//b, / pour celle de la racine). Une exception, que of_selected_addressable signale : ce qui est sous la seconde de deux clés identiques (le chemin désigne la première).
• De droite à gauche : un document JSON est un texte de gauche à droite, l'arbre le reste dans une application en RTL (seule la zone de recherche suit le sens de l'application).
• Le clavier reste à l'arbre : Entrée plie un bloc ou « clique » une feuille (ue_node_clicked), jamais le bouton par défaut de la fenêtre ; Échap ferme d'abord la zone de recherche ouverte, puis revient à la fenêtre ; les lignes fermantes (}, ]) ne sont pas des positions de la sélection ; Ctrl+C copie la sélection (of_copy), ou le morceau de texte surligné à la souris ; Espace plie un bloc et ne fait jamais défiler la vue ; la touche Menu (Maj+F10) lève ue_node_rclicked.
• Très gros documents : au-delà de 1 500 000 lignes, le document est refusé avec ue_error plutôt que tronqué sans le dire. L'impression (of_print, of_print_to_pdf) sort ce qui est déplié, jusqu'à 10 000 lignes : un bloc replié s'imprime replié (of_expand_all avant, pour tout imprimer).

Hérité du socle commun #

Ces membres existent sur tous les composants visuels — ils ne sont pas propres à celui-ci. Ils sont détaillés une seule fois, dans les chapitres transverses ; cette table dit seulement où les lire.

← Référence des composants · Sommaire du guide