# Pacoideas - Uso del control VTreeWidget para ver y editar JSON

**URL:** <https://foros.velneo.com/t/pacoideas-uso-del-control-vtreewidget-para-ver-y-editar-json/11682>\
**Category:** Compartir código fuente y ejemplos\
**Created:** [13 Septiembre, 2025 18:21 UTC](https://foros.velneo.com/t/pacoideas-uso-del-control-vtreewidget-para-ver-y-editar-json/11682 "2025-09-13T18:21:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![correo](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/correo/32/5689_2.png) [@correo](https://foros.velneo.com/u/correo)\
**Post date:** [13 Septiembre, 2025 18:21 UTC](https://foros.velneo.com/t/pacoideas-uso-del-control-vtreewidget-para-ver-y-editar-json/11682/1 "2025-09-13T18:21:00Z")

</div>

Hola.

 ![Pacoideas_logo](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/c/c6b5733a7e4a2447178c326136b88d31b36fa511.png)

Ahora que el uso de **JSON** es habitual en muchos de nuestros proyectos, necesitamos un control que facilite su **visualización** y **edición**. He comprobado que habéis usado diversas soluciones, la mayoría de las veces usando librerías JavaScript con el **Visor HTML** de Velneo.

Aquí, la idea es utilizar el control **TreeWidget** para representar de forma jerárquica la información contenida en un archivo **JSON** , permitiendo al usuario explorar su estructura en forma de árbol. Cada **nodo** del TreeView corresponde a una **clave** o **índice** del **JSON** , y sus elementos hijos representan los valores asociados, que pueden ser **simples** (texto, número, booleano) o **complejos** (objetos o arrays).

> De este modo, se facilita la visualización y navegación de datos anidados, expandiendo o contrayendo ramas según sea necesario, lo que resulta especialmente útil para inspeccionar estructuras profundas o con múltiples niveles de información.

He preparado un ejemplo en la aplicación del cloud **0PS\_MiAPI** en la rama **VTreeWidget - Parsear JSON** de la sección **Controles de formulario**.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/velneo/original/2X/6/6d7de1e1f61394006bd85e43f68d8f98c979bcb8.png)

Dispones de 2 strings **JSON** , uno de ellos es un Array.  
Puedes mostrarlos en el control **TreeWidget** y editar el valor haciendo _doble-click_ en el Item seleccionado.

Finalmente puedes obtener el **JSON** editado en el control.

> En la aplicación **“Cosas de Paco Satué”** podéis comprobar el uso de este código en el formulario con el gráfico **QtChart**. En la versión Velneo Web no funciona la edición (función [editItem()](https://doc.velneo.com/velneo-vdevelop/scripts/lenguajes/javascript/clases/vtreewidget#edititem)) de los valores de la columna. Podéis visualizar y cambiar tanto los **datos** como las **opciones** del gráfico QtChart usando los strings JSON y el control TreeWidget.

Saludos y que lo disfrutéis.  
Paco Satué

---

<div class="post-metadata">

**Author:** ![estisoft](https://yyz1.discourse-cdn.com/flex035/user_avatar/foros.velneo.com/estisoft/32/5714_2.png) [@estisoft](https://foros.velneo.com/u/estisoft)\
**Post date:** [15 Septiembre, 2025 21:39 UTC](https://foros.velneo.com/t/pacoideas-uso-del-control-vtreewidget-para-ver-y-editar-json/11682/2 "2025-09-15T21:39:15Z")

</div>

Gracias por el aporte logre implementar