jsontree — u_pbt_jsontree #

← Referencia de componentes · Índice de la guía

jsontree muestra un valor JSON como un árbol plegable, coloreado por tipo: una pantalla de configuración, una respuesta de API, una depuración de integración. Fija el texto JSON en is_json, el componente lo muestra; un clic en un nodo reporta su ruta (ue_node_clicked), un JSON inválido lanza ue_error. No modifica nada: es un VISOR.

▶ Verlo en vivo — Aplicación de demostración, mosaico JSON tree, con el código y esta página lado a lado.

De un vistazo #

Inicio rápido #

// 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

Propiedades #

Métodos #

Eventos #

Ejemplo #

Explorar la respuesta de una 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

Leer el valor de un nodo pulsado #

// 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()

Buscar palabras completas, con mayúsculas #

// 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")

Conservar los pliegues cuando se actualiza la respuesta #

// 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 menú sobre un nodo #

// 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

Buenas prácticas #

• Es un visor, no un editor: muestra el JSON, no lo cambia. Para leer un valor, pase la ruta de ue_node_clicked a n_pbt_json.of_get_string sobre el mismo texto, o lea of_selected_text.
• Un JSON grande sigue fluido: solo se dibujan las líneas en pantalla, una respuesta de varios cientos de KB se recorre con el teclado sin esperas. of_collapse_all primero sigue siendo lo más legible.
• Un JSON inválido no rompe nada: ue_error lo dice (con la línea y la columna del error), el árbol queda vacío. Es la respuesta que mostrar, no un fallo.
• Toda clave tiene una ruta: un / o un ~ se escribe en ella ~1 o ~0 (JSON Pointer), y n_pbt_json la lee así — paths/~1users~1{id} para una especificación OpenAPI. Una clave VACÍA es un nivel vacío (a//b, / para la de la raíz). Una excepción, que of_selected_addressable señala: lo que está bajo la segunda de dos claves idénticas (la ruta designa la primera).
• De derecha a izquierda: un documento JSON es un texto de izquierda a derecha, y el árbol lo sigue siendo en una aplicación RTL (solo el cuadro de búsqueda sigue el sentido de la aplicación).
• El teclado se queda en el árbol: Intro pliega un bloque o «hace clic» en una hoja (ue_node_clicked), nunca el botón por defecto de la ventana; Esc cierra primero el cuadro de búsqueda abierto y luego vuelve a la ventana; las líneas de cierre (}, ]) no son posiciones de la selección; Ctrl+C copia la selección (of_copy), o el trozo de texto resaltado con el ratón; Espacio pliega un bloque y nunca desplaza la vista; la tecla Menú (Mayús+F10) lanza ue_node_rclicked.
• Documentos muy grandes: por encima de 1.500.000 líneas el documento se rechaza con ue_error en lugar de cortarse en silencio. La impresión (of_print, of_print_to_pdf) saca lo que está desplegado, hasta 10.000 líneas: un bloque plegado se imprime plegado (of_expand_all antes, para imprimirlo todo).

Heredado de la base común #

Estos miembros existen en todos los componentes visuales — no son propios de este. Se detallan una sola vez, en los capítulos transversales; esta tabla solo dice dónde leerlos.

← Referencia de componentes · Índice de la guía