Aplicacions amb Flutter, Dart i Flame

Tutorial Flutter Flame Projectes   Recursos CITCEA
Exemples Dart Dades pràctiques     Inici

Tractament de dades en format JSON

Si la nostra aplicació cerca informació a internet, és probable que rebi informació en format JSON. El format JSON és una forma organitzada d'enviar informació que procura trobar un equilibri entre minimitzar la mida de les dades enviades i facilitar el seu tractament posterior. Per a aquesta explicació farem servir el servei que ofereix el web Dones destacades en ciència i tecnologia però podríem fer servir qualsevol altre proveïdor. En cada cas, les dades rebudes seran diferents, com també ho serà la forma d'organitzar-les; però, si el format és JSON, tots compartiran la mateixa forma de marcar els camps.

Agafarem com a exemple el que ens retorna aquesta adreça URL, que, de fet, és un text força llarg, les primeres línies del qual tenen aquest aspecte:

{"info":{"tipus":"Dones catalanes","descrip":"Llista de les dones catalanes","creat":"20250824","autoria":{"autor":"Oriol Boix",
"contacte":"oriol.boix@upc.edu"}},"dades":[{"Id":"1826","Ambit":"PS","Nom":"Àngels Ferrer Sensat","Nom casada":"","Altre nom":"",
"Professio":"Científica catalana","Fet destacat 1":"Va ser innovadora en metodologies d'ensenyament"},{"Id":"850","Ambit":"MD",
"Nom":"Àngels García Cazorla","Nom casada":"","Altre nom":"","Professio":"Neuropediatra catalana",
"Fet destacat 1":"Especialista en malalties neurometabòliques"},{"Id":"885","Ambit":"GF","Nom":"Àngels Pascual de Sans",
"Nom casada":"","Altre nom":"","Professio":"Química catalana","Fet destacat 1":"Especialista en l'estudi de les migracions"},
{"Id":"2131","Ambit":"EE","Nom":"Íngrid Munné Collado","Nom casada":"","Altre nom":"","Professio":"Enginyera industrial catalana",
"Fet destacat 1":"Especialista en anàlisi de dades aplicada a sistemes energètics"},{"Id":"2279","Ambit":"CM",
"Nom":"Aïda Pelegrí Ferré","Nom casada":"","Altre nom":"","Professio":"Enginyera de telecomunicacions catalana",
"Fet destacat 1":"Experta en comunicacions d'emergència i seguretat"},{"Id":"3456","Ambit":"PA","Nom":"Adela Maria Trepat Massó",
"Nom casada":"","Altre nom":"","Professio":"Traductora catalana","Fet destacat 1":"Especialista en epigrafia"},
...

Aquest format és força difícil de llegir, malgrat en aquest cas hem afegit salts de línia; si no ho haguéssim fet, el text estaria en una sola línia molt llarga.

Si heu obert l'adreça URL en el navegador, probablement trobareu una casella a la part superior que indica Aplica estils de format. Picant en aquesta casella, el navegador dona un format bàsic als resultats, fent que siguin més fàcils de llegir. Per exemple:

{
  "info": {
    "tipus": "Dones catalanes",
    "descrip": "Llista de les dones catalanes",
    "creat": "20250824",
    "autoria": {
      "autor": "Oriol Boix",
      "contacte": "oriol.boix@upc.edu"
    }
  },
  "dades": [
    {
      "Id": "1826",
      "Ambit": "PS",
      "Nom": "Àngels Ferrer Sensat",
      "Nom casada": "",
      "Altre nom": "",
      "Professio": "Científica catalana",
      "Fet destacat 1": "Va ser innovadora en metodologies d'ensenyament"
    },
    {
      "Id": "850",
      "Ambit": "MD",
      "Nom": "Àngels García Cazorla",
      "Nom casada": "",
      "Altre nom": "",
      "Professio": "Neuropediatra catalana",
      "Fet destacat 1": "Especialista en malalties neurometabòliques"
    },
    {
      "Id": "885",
      "Ambit": "GF",
      "Nom": "Àngels Pascual de Sans",
      "Nom casada": "",
      "Altre nom": "",
      "Professio": "Química catalana",
      "Fet destacat 1": "Especialista en l'estudi de les migracions"
    },
...

Si hem de treballar amb les dades JSON, és millor fer servir un editor de JSON. Un força pràctic és el JSON Editor Online. Si hi entrem, podem copiar el text rebut i enganxar-lo en el requadre; llavors el botó tree ens permetrà veure les dades en un format pràctic.

JSON Editor Online

En el format JSON, les claus delimiten un element i els claudàtors indiquen que hi ha una llista, que tindrà cada un dels seus elements dins d'unes claus. La informació es guarda en un format clau-valor, en el qual la clau i el valor es separen per dos punts. Les claus són de text mentre que els valors poden no ser-ho, encara que el més habitual és que ho siguin.

Per tractar les dades en format JSON, tenim la funció jsonDecode, que ens ho converteix a una combinació de llistes i diccionaris que es corresponen amb el format rebut.

...
      var jsonDecodificat = jsonDecode(llistaDonesRebuda.body);
...

En molts casos crearem una classe que ens permeti empaquetar la informació rebuda i extreure'n els camps que ens facin falta. En aquest exemple podem veure algunes formes de fer-ho.

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.