קריאת JSON

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 15 מתוך 27.

שרתים כמעט אף פעם לא עונים במשפט פשוט. הם שולחים JSON: טקסט שמכיל נתונים, עם שמות במרכאות וערכים אחרי נקודתיים. ה-API לתרגול בנתיב /user עונה כך:

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

מבחינת האפליקציה שלך, זהו String ארוך אחד. jsonDecode, מתוך הספרייה dart:convert של Dart, הופכת את הטקסט הזה לערכים של Dart. סוגריים מסולסלים הופכים ל-Map: השמות הם המפתחות שלו.

import 'dart:convert';

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

המפתחות הם תמיד מחרוזות. הערכים יכולים להיות טקסט, מספרים, true או false, רשימות או מפות נוספות, ולכן הסוג שלהם הוא dynamic: "כל סוג, שנקבע בזמן שהאפליקציה פועלת". המפתחות חייבים להיות זהים בדיוק: user['Name'] אינו user['name'], ומפתח חסר מחזיר null.

פענחי את התשובה במקום שבו את מביאה אותה, בפונקציה משלה, כדי שהמסך יקבל נתונים מוכנים לשימוש.

אתגר

בינוני

מסך הפרופיל מציג את ה-JSON הגולמי. הציגו את האדם במקום זאת:

loadUser מחזירה Future<Map<String, dynamic>>: היא ממתינה ל-fetch('/user') ומחזירה את jsonDecode של גוף התשובה (ייבאו את dart:convert)
גם _user וה-FutureBuilder משתמשים באותו טיפוס
כשהנתונים מגיעים, הציגו Column עם user['name'] (גודל 28, מודגש) ומתחתיו את user['email']

נסו בעצמכם

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