🖱️ Questo tutorial spiega come analizzare un file JSON che contiene una lista di oggetti (un JSON annidato) e utilizzare i dati per popolare una ListView in App Inventor 2.

🖱️ JSON di Esempio

🖱️ Il JSON che utilizzeremo come esempio ha una struttura tipica per una lista di record:

{
"biglietti": [
{
"id": "1",
"id_ordine": "4961",
"id_qr": "ch_3SUP70BoQuiAHNbP1MZvqaTe",
"img_qr": "https://quickchart.io/qr?text=ch_3SUP70BoQuiAHNbP1MZvqaTe&ecLevel=Q&size=200&margin=1&format=png",
"nome": "Pippo Consulting",
"cognome": "",
"nominativo": "Pippo Consulting ",
"email": "oooo",
"cellulare": "3475545888",
"ingressi": "0",
"ingressi_acquistati": "2",
"ingressi_info": "0/2",
"id_convalidatore": "3",
"nome_convalidatore": "Bruno",
"datetime_aggiunta": "2025-11-17 10:52:52",
"datetime_modifica": "2025-11-27 12:54:33",
"datetime_aggiunta_ita": "17/11/2025 10:52:52",
"datetime_modifica_ita": "27/11/2025 12:54:33",
"ordine_esiste": true,
"costo_ordine": "150.00"
},
{
"id": "2",
"id_ordine": "4962",
"id_qr": "ch_3SUPJFBoQuiAHNbP0L2nK0Tm",
"img_qr": "https://quickchart.io/qr?text=ch_3SUPJFBoQuiAHNbP0L2nK0Tm&ecLevel=Q&size=200&margin=1&format=png",
"nome": "Bruno",
"cognome": "hero",
"nominativo": "Bruno hero",
"email": "ppp",
"cellulare": "347554777",
"ingressi": "3",
"ingressi_acquistati": "4",
"ingressi_info": "3/4",
"id_convalidatore": "3",
"nome_convalidatore": "Bruno",
"datetime_aggiunta": "2025-11-17 11:05:30",
"datetime_modifica": "2025-11-27 12:49:38",
"datetime_aggiunta_ita": "17/11/2025 11:05:30",
"datetime_modifica_ita": "27/11/2025 12:49:38",
"ordine_esiste": true,
"costo_ordine": "300.00"
},
{
"id": "3",
"id_ordine": "4970",
"id_qr": "ch_3SUS1lBoQuiAHNbP0HaCwxkZ",
"img_qr": "https://quickchart.io/qr?text=ch_3SUS1lBoQuiAHNbP0HaCwxkZ&ecLevel=Q&size=200&margin=1&format=png",
"nome": "Forza Napoli",
"cognome": "Piccirillo",
"nominativo": "Forza Napoli",
"email": "hhh",
"cellulare": "349427889222",
"ingressi": "1",
"ingressi_acquistati": "1",
"ingressi_info": "1/1",
"id_convalidatore": null,
"nome_convalidatore": null,
"datetime_aggiunta": "2025-11-17 13:59:40",
"datetime_modifica": null,
"datetime_aggiunta_ita": "17/11/2025 13:59:40",
"datetime_modifica_ita": null,
"ordine_esiste": true,
"costo_ordine": "75.00"
}
]
}

🖱️ Come lo gestiamo? questo json ha una Key principale (bigletti) e in questa key ci sono 3 Json con dei dati, come Popoliamo una listview?

🖱️ Struttura Chiave del JSON

• Radice: L’intero contenuto è un oggetto JSON (delimitato da {}).
• Chiave Principale (Livello 1): Contiene un’unica chiave, "biglietti".
• Lista di Oggetti (Livello 2): Il valore associato alla chiave "biglietti" è una Lista JSON (delimitata da []), che contiene gli oggetti (i singoli biglietti).
• Oggetti Dati (Livello 3): Ogni elemento all’interno della lista [] è un oggetto JSON ({}) che contiene i dati del singolo biglietto (es. "id", "nominativo", ecc.).
• 2. Preparazione in App Inventor
• Prima di procedere con i blocchi, definiamo le variabili globali che useremo per memorizzare e lavorare con i dati:
  

🖱️ Blocchi di Gestione del JSON

Il processo di estrazione dei dati dal JSON annidato in AI2 avviene in vari passaggi:

🖱️ Ottenere la Lista dal JSON Principale

Per prima cosa, dobbiamo estrarre la lista di tutti i biglietti (gli oggetti {}) dalla chiave principale "biglietti".

🖱️ Avviamo un Clock per comodita con interval di 2 secondi per dare il tempo a Json_Temp & Lista_Temp di popolarsi… questultima conterra tutti i jeson della Key (biglietti) che in questo caso sono 3

🖱️ Cosa suiccede in questo blocco?

• 1 Se la lista e popolata stoppa il timer…
• 2 timer Stop
• 3 ad ogni ciclo popola il dictionary Json_temp
• 4 popla la Lista_temp per poi popolare lgli Elements della ListaView
• 5 mostra tutti gli item popolati nella ListView
• Verranno poi mostrati i tre elementi di prova cosi…
  
  
  

🖱️ Gestione della Selezione nella ListView

Quando l’utente seleziona un elemento dalla ListView, AI2 fornisce automaticamente l’indice (la posizione) di quell’elemento nella lista. Poiché la lista dei nominativi (Global Joso_Temp) è stata popolata nell’ordine esatto in cui i biglietti si trovavano nel JSON originale, possiamo usare questo indice per recuperare l’intero oggetto JSON del biglietto selezionato dalla lista di riferimento (Global Lista_Temp).

🖱️ Gestione della Selezione nella ListView

Quando l’utente seleziona un elemento dalla ListView, AI2 fornisce automaticamente l’indice (la posizione) di quell’elemento nella lista. Poiché la lista dei nominativi (Global Lista_Temp) è stata popolata nell’ordine esatto in cui i biglietti si trovavano nel JSON originale, possiamo usare questo indice per recuperare l’intero oggetto JSON del biglietto selezionato dalla lista di riferimento (Global Lista_Temp).

Il Blocco AfterPicking

Utilizzeremo il blocco evento ListView1.AfterPicking.

Descrizione dei Blocchi:

1. Evento ListView1.AfterPicking: Questo blocco si attiva quando l’utente tocca un elemento della ListView.
2. Recupero dell’Indice: Il blocco ListView1.SelectionIndex fornisce l’indice (la posizione) dell’elemento selezionato (il primo elemento in AI2 è 1, non 0).
3. Recupero del Dizionario Completo:
   • Usiamo il blocco select list item (dalla sezione Lists).
   • La lista è la nostra lista di riferimento di tutti gli oggetti JSON: Global Lista_Temp.
   • L’indice è quello fornito da ListView1.SelectionIndex.
   • Il risultato è l’intero dizionario JSON ({...}) del biglietto selezionato (es. quello di “Pippo Consulting”).

🖱️ Cosa fa in realta Evento ListView1.AfterPicking: ?

• 1 Va nella VR_Riepilogo per mostrare il tutto….
• 2 Popola Il Dictionary Json_Temp con la selezione effettuata in precedenza
• 3 Cicla tutti gli elementi utilizzando il ciclo apposito dei Dizionary…
• 4 Mostra nella Label il contenuto formattato….
  

Cosi:

Qesto e solo un esempio… ovviamente si possono filtrare i vari elemeti prelevando solo alcuni es cellulare, cost_ordine eccc…

In questo modo, l’utente vede subito tutti i dettagli completi del biglietto selezionato, mostrando il dettaglio del JSON annidato.