Đọc JSON

Thuộc phần Dữ liệu và mạng trong hành trình Flutter của Coddy. Bài học 15 trên 27.

Máy chủ hiếm khi trả lời bằng một câu đơn giản. Chúng gửi JSON: văn bản chứa dữ liệu, với tên nằm trong dấu ngoặc kép và giá trị đứng sau dấu hai chấm. API luyện tập tại /user trả về nội dung này:

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

Với ứng dụng của bạn, đó là một String dài. jsonDecode, thuộc thư viện dart:convert của Dart, chuyển văn bản đó thành các giá trị Dart. Dấu ngoặc nhọn tạo thành một Map: tên là các khóa của nó.

import 'dart:convert';

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

Các khóa luôn là chuỗi. Giá trị có thể là văn bản, số, true hoặc false, danh sách hoặc các map khác, nên kiểu dữ liệu của chúng là dynamic: “bất kỳ kiểu nào, được xác định khi ứng dụng chạy”. Các khóa phải khớp chính xác: user['Name'] không phải là user['name'], và khóa không tồn tại sẽ trả về null.

Hãy giải mã câu trả lời ngay tại nơi bạn lấy dữ liệu, trong hàm riêng, để màn hình nhận được dữ liệu sẵn sàng sử dụng.

Thử thách

Trung bình

Màn hình hồ sơ hiển thị JSON thô. Hãy hiển thị thông tin người dùng thay vào đó:

loadUser trả về một Future<Map<String, dynamic>>: hàm này chờ fetch('/user') rồi trả về kết quả jsonDecode của phần thân (nhập dart:convert)
_user và FutureBuilder cũng dùng kiểu đó
khi dữ liệu về, hãy hiển thị một Column có user['name'] (cỡ chữ 28, in đậm) và bên dưới là user['email']

Tự làm thử

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();
          },
        ),
      ),
    );
  }
}