El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Parseo de Datos JSON

Siguiente ►
►

En este tema, aprenderemos cómo manejar y parsear datos JSON en Flutter utilizando el lenguaje de programación Dart. JSON (JavaScript Object Notation) es un formato de intercambio de datos ligero y fácil de leer y escribir para los humanos, y fácil de parsear y generar para las máquinas.

Contenido

  1. ¿Qué es JSON?
  2. Decodificación de JSON en Dart
  3. Codificación de JSON en Dart
  4. Ejemplo Práctico
  5. Ejercicios Prácticos

  1. ¿Qué es JSON?

JSON es un formato de texto que se utiliza para representar datos estructurados basados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo, enviar datos desde el servidor al cliente).

Ejemplo de JSON

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"]
}

  1. Decodificación de JSON en Dart

Para decodificar (parsear) JSON en Dart, utilizamos la función jsonDecode del paquete dart:convert. Esta función convierte una cadena JSON en un mapa de Dart.

Ejemplo de Decodificación

import 'dart:convert';

void main() {
  String jsonString = '{"name": "John Doe", "age": 30, "isStudent": false, "courses": ["Math", "Science", "History"]}';
  
  Map<String, dynamic> user = jsonDecode(jsonString);
  
  print('Name: ${user['name']}');
  print('Age: ${user['age']}');
  print('Is Student: ${user['isStudent']}');
  print('Courses: ${user['courses']}');
}

Explicación

  • jsonDecode convierte la cadena JSON en un mapa de Dart.
  • Accedemos a los valores del mapa utilizando las claves correspondientes.

  1. Codificación de JSON en Dart

Para codificar (serializar) un objeto de Dart a una cadena JSON, utilizamos la función jsonEncode del paquete dart:convert.

Ejemplo de Codificación

import 'dart:convert';

void main() {
  Map<String, dynamic> user = {
    'name': 'John Doe',
    'age': 30,
    'isStudent': false,
    'courses': ['Math', 'Science', 'History']
  };
  
  String jsonString = jsonEncode(user);
  
  print(jsonString);
}

Explicación

  • jsonEncode convierte el mapa de Dart en una cadena JSON.
  • La cadena JSON resultante puede ser utilizada para transmitir datos a través de una red o almacenarlos.

  1. Ejemplo Práctico

Vamos a crear una clase User en Dart y veremos cómo podemos decodificar y codificar objetos de esta clase desde y hacia JSON.

Definición de la Clase User

class User {
  String name;
  int age;
  bool isStudent;
  List<String> courses;

  User({required this.name, required this.age, required this.isStudent, required this.courses});

  // Método para crear un objeto User desde un mapa JSON
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'],
      age: json['age'],
      isStudent: json['isStudent'],
      courses: List<String>.from(json['courses']),
    );
  }

  // Método para convertir un objeto User a un mapa JSON
  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
      'isStudent': isStudent,
      'courses': courses,
    };
  }
}

Uso de la Clase User

import 'dart:convert';

void main() {
  String jsonString = '{"name": "John Doe", "age": 30, "isStudent": false, "courses": ["Math", "Science", "History"]}';
  
  // Decodificar JSON a objeto User
  Map<String, dynamic> userMap = jsonDecode(jsonString);
  User user = User.fromJson(userMap);
  
  print('Name: ${user.name}');
  print('Age: ${user.age}');
  print('Is Student: ${user.isStudent}');
  print('Courses: ${user.courses}');
  
  // Codificar objeto User a JSON
  String encodedJson = jsonEncode(user.toJson());
  print('Encoded JSON: $encodedJson');
}

Explicación

  • User.fromJson es un constructor de fábrica que crea una instancia de User a partir de un mapa JSON.
  • toJson es un método que convierte una instancia de User en un mapa JSON.
  • Utilizamos jsonDecode para convertir la cadena JSON en un mapa y luego User.fromJson para crear una instancia de User.
  • Utilizamos jsonEncode para convertir el objeto User en una cadena JSON.

  1. Ejercicios Prácticos

Ejercicio 1

Dado el siguiente JSON, crea una clase Product en Dart y escribe los métodos fromJson y toJson para decodificar y codificar objetos Product.

{
  "id": 1,
  "name": "Laptop",
  "price": 999.99,
  "inStock": true
}

Solución

class Product {
  int id;
  String name;
  double price;
  bool inStock;

  Product({required this.id, required this.name, required this.price, required this.inStock});

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'],
      name: json['name'],
      price: json['price'],
      inStock: json['inStock'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'price': price,
      'inStock': inStock,
    };
  }
}

Ejercicio 2

Escribe un programa que decodifique el siguiente JSON a una lista de objetos Product y luego codifique esa lista de vuelta a JSON.

[
  {"id": 1, "name": "Laptop", "price": 999.99, "inStock": true},
  {"id": 2, "name": "Mouse", "price": 19.99, "inStock": true},
  {"id": 3, "name": "Keyboard", "price": 49.99, "inStock": false}
]

Solución

import 'dart:convert';

void main() {
  String jsonString = '''
  [
    {"id": 1, "name": "Laptop", "price": 999.99, "inStock": true},
    {"id": 2, "name": "Mouse", "price": 19.99, "inStock": true},
    {"id": 3, "name": "Keyboard", "price": 49.99, "inStock": false}
  ]
  ''';

  // Decodificar JSON a lista de objetos Product
  List<dynamic> productListJson = jsonDecode(jsonString);
  List<Product> productList = productListJson.map((json) => Product.fromJson(json)).toList();

  productList.forEach((product) {
    print('Product Name: ${product.name}, Price: ${product.price}');
  });

  // Codificar lista de objetos Product a JSON
  String encodedJson = jsonEncode(productList.map((product) => product.toJson()).toList());
  print('Encoded JSON: $encodedJson');
}

Explicación

  • Decodificamos la cadena JSON a una lista de mapas.
  • Convertimos cada mapa en un objeto Product utilizando Product.fromJson.
  • Codificamos la lista de objetos Product de vuelta a JSON utilizando jsonEncode.

Conclusión

En esta lección, hemos aprendido cómo decodificar y codificar datos JSON en Dart. Hemos visto ejemplos prácticos y hemos trabajado con una clase personalizada para manejar datos JSON de manera eficiente. Estos conocimientos son fundamentales para trabajar con APIs y manejar datos en aplicaciones Flutter.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados