El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com analitzar dades JSON en una aplicació Flutter utilitzant el llenguatge de programació Dart. JSON (JavaScript Object Notation) és un format de dades lleuger i fàcil de llegir que s'utilitza àmpliament per intercanviar dades entre un servidor i una aplicació web o mòbil.

Objectius

Comprendre què és JSON i per què s'utilitza.
Aprendre a deserialitzar (parsejar) dades JSON en objectes Dart.
Aprendre a serialitzar objectes Dart en JSON.
Treballar amb dades JSON complexes.

Què és JSON?

JSON és un format de text per a l'intercanvi de dades que és fàcil de llegir i escriure per a humans i fàcil de parsejar i generar per a màquines. Un objecte JSON és una col·lecció de parelles clau-valor, i una matriu JSON és una llista ordenada de valors.

Exemple d'Objecte JSON

{
  "nom": "Joan",
  "edat": 30,
  "correu": "[email protected]",
  "interessos": ["programació", "lectura", "esports"]
}

Exemple de Matriu JSON

[
  {
    "nom": "Joan",
    "edat": 30
  },
  {
    "nom": "Maria",
    "edat": 25
  }
]

Deserialitzar Dades JSON

Deserialitzar dades JSON significa convertir una cadena JSON en objectes Dart. En Dart, podem utilitzar la biblioteca dart:convert per a aquesta tasca.

Exemple Pràctic

Suposem que tenim la següent cadena JSON:

{
  "nom": "Joan",
  "edat": 30,
  "correu": "[email protected]",
  "interessos": ["programació", "lectura", "esports"]
}

Podem deserialitzar aquesta cadena en un objecte Dart de la següent manera:

import 'dart:convert';

void main() {
  String jsonString = '''
  {
    "nom": "Joan",
    "edat": 30,
    "correu": "[email protected]",
    "interessos": ["programació", "lectura", "esports"]
  }
  ''';

  Map<String, dynamic> user = jsonDecode(jsonString);

  print('Nom: ${user['nom']}');
  print('Edat: ${user['edat']}');
  print('Correu: ${user['correu']}');
  print('Interessos: ${user['interessos']}');
}

Explicació del Codi

jsonDecode és una funció de la biblioteca dart:convert que converteix una cadena JSON en un objecte Dart.
El resultat és un Map<String, dynamic> on les claus són cadenes i els valors poden ser de qualsevol tipus.

Serialitzar Objectes Dart en JSON

Serialitzar objectes Dart en JSON significa convertir objectes Dart en una cadena JSON. També podem utilitzar la biblioteca dart:convert per a aquesta tasca.

Exemple Pràctic

Suposem que tenim el següent objecte Dart:

Map<String, dynamic> user = {
  'nom': 'Joan',
  'edat': 30,
  'correu': '[email protected]',
  'interessos': ['programació', 'lectura', 'esports']
};

Podem serialitzar aquest objecte en una cadena JSON de la següent manera:

import 'dart:convert';

void main() {
  Map<String, dynamic> user = {
    'nom': 'Joan',
    'edat': 30,
    'correu': '[email protected]',
    'interessos': ['programació', 'lectura', 'esports']
  };

  String jsonString = jsonEncode(user);

  print(jsonString);
}

Explicació del Codi

jsonEncode és una funció de la biblioteca dart:convert que converteix un objecte Dart en una cadena JSON.

Treballar amb Dades JSON Complexes

Quan treballem amb dades JSON complexes, és útil definir classes per representar les dades i utilitzar constructors i mètodes de fàbrica per a la deserialització i la serialització.

Exemple Pràctic

Suposem que tenim la següent cadena JSON:

{
  "nom": "Joan",
  "edat": 30,
  "correu": "[email protected]",
  "interessos": ["programació", "lectura", "esports"]
}

Podem definir una classe User per representar aquestes dades:

import 'dart:convert';

class User {
  String nom;
  int edat;
  String correu;
  List<String> interessos;

  User({required this.nom, required this.edat, required this.correu, required this.interessos});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      nom: json['nom'],
      edat: json['edat'],
      correu: json['correu'],
      interessos: List<String>.from(json['interessos']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'nom': nom,
      'edat': edat,
      'correu': correu,
      'interessos': interessos,
    };
  }
}

void main() {
  String jsonString = '''
  {
    "nom": "Joan",
    "edat": 30,
    "correu": "[email protected]",
    "interessos": ["programació", "lectura", "esports"]
  }
  ''';

  // Deserialitzar
  Map<String, dynamic> userMap = jsonDecode(jsonString);
  User user = User.fromJson(userMap);

  print('Nom: ${user.nom}');
  print('Edat: ${user.edat}');
  print('Correu: ${user.correu}');
  print('Interessos: ${user.interessos}');

  // Serialitzar
  String json = jsonEncode(user);
  print('JSON: $json');
}

Explicació del Codi

La classe User té un constructor per inicialitzar les propietats.
El mètode de fàbrica fromJson crea una instància de User a partir d'un Map<String, dynamic>.
El mètode toJson converteix una instància de User en un Map<String, dynamic>.

Exercicis Pràctics

Exercici 1

Deserialitza la següent cadena JSON en un objecte Dart i imprimeix les seves propietats:

{
  "títol": "Flutter per a Principiants",
  "autor": "Anna",
  "pàgines": 200,
  "temes": ["Flutter", "Dart", "Programació"]
}

Solució

import 'dart:convert';

void main() {
  String jsonString = '''
  {
    "títol": "Flutter per a Principiants",
    "autor": "Anna",
    "pàgines": 200,
    "temes": ["Flutter", "Dart", "Programació"]
  }
  ''';

  Map<String, dynamic> book = jsonDecode(jsonString);

  print('Títol: ${book['títol']}');
  print('Autor: ${book['autor']}');
  print('Pàgines: ${book['pàgines']}');
  print('Temes: ${book['temes']}');
}

Exercici 2

Defineix una classe Book per representar les dades del llibre i implementa els mètodes fromJson i toJson.

Solució

import 'dart:convert';

class Book {
  String títol;
  String autor;
  int pàgines;
  List<String> temes;

  Book({required this.títol, required this.autor, required this.pàgines, required this.temes});

  factory Book.fromJson(Map<String, dynamic> json) {
    return Book(
      títol: json['títol'],
      autor: json['autor'],
      pàgines: json['pàgines'],
      temes: List<String>.from(json['temes']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'títol': títol,
      'autor': autor,
      'pàgines': pàgines,
      'temes': temes,
    };
  }
}

void main() {
  String jsonString = '''
  {
    "títol": "Flutter per a Principiants",
    "autor": "Anna",
    "pàgines": 200,
    "temes": ["Flutter", "Dart", "Programació"]
  }
  ''';

  // Deserialitzar
  Map<String, dynamic> bookMap = jsonDecode(jsonString);
  Book book = Book.fromJson(bookMap);

  print('Títol: ${book.títol}');
  print('Autor: ${book.autor}');
  print('Pàgines: ${book.pàgines}');
  print('Temes: ${book.temes}');

  // Serialitzar
  String json = jsonEncode(book);
  print('JSON: $json');
}

Conclusió

En aquesta secció, hem après com treballar amb dades JSON en Flutter utilitzant Dart. Hem vist com deserialitzar i serialitzar dades JSON, així com treballar amb dades JSON complexes mitjançant la definició de classes. Aquestes habilitats són essencials per a la majoria de les aplicacions modernes que necessiten intercanviar dades amb un servidor.

Analitzar Dades JSON

Objectius

Què és JSON?

Exemple d'Objecte JSON

Exemple de Matriu JSON

Deserialitzar Dades JSON

Exemple Pràctic

Explicació del Codi

Serialitzar Objectes Dart en JSON

Exemple Pràctic

Explicació del Codi

Treballar amb Dades JSON Complexes

Exemple Pràctic

Explicació del Codi

Exercicis Pràctics

Exercici 1

Solució

Exercici 2

Solució

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori