Lettura di JSON

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 15 di 27.

I server raramente rispondono con una semplice frase. Inviano JSON: testo che contiene dati, con nomi tra virgolette e valori dopo i due punti. L'API di prova /user risponde così:

{
  "name": "Maya Chen",
  "email": "maya@example.com",
  "age": 28,
  "isPro": true
}

Per la tua app è un'unica lunga String. jsonDecode, della libreria dart:convert di Dart, trasforma quel testo in valori Dart. Le parentesi graffe diventano una Map: i nomi sono le sue chiavi.

import 'dart:convert';

final Map<String, dynamic> user = jsonDecode(body);
print(user['name']);   // Maya Chen

Le chiavi sono sempre stringhe. I valori possono essere testo, numeri, true o false, elenchi o altre mappe, quindi il loro tipo è dynamic: «qualsiasi tipo, deciso mentre l'app è in esecuzione». Le chiavi devono corrispondere esattamente: user['Name'] non è user['name'], e una chiave mancante restituisce null.

Decodifica la risposta nel punto in cui la recuperi, all'interno di una funzione dedicata, così la schermata riceve dati pronti all'uso.

Sfida

Medio

La schermata del profilo mostra il JSON grezzo. Mostra invece la persona:

loadUser restituisce un Future<Map<String, dynamic>>: attende fetch('/user') e restituisce jsonDecode del corpo (importa dart:convert)
Anche _user e FutureBuilder usano quel tipo
quando arrivano i dati, mostra un Column con user['name'] (dimensione 28, grassetto) e sotto user['email']

Provalo tu

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({super.key});

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late Future<String> _user;

  @override
  void initState() {
    super.initState();
    _user = loadUser();
  }

  Future<String> loadUser() async {
    return fetch('/user');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<String>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!);
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Mettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Dati e rete

Esercitati da solo: Compilatore Flutter online