📦 Lesson 9: JSON & Data Models

⏱ 35-45 min 📊 Intermediate 🔬 Data Layer 🔥 Essential 2026 🔗 Official Source

📦

The Data Challenge

Every app needs data. APIs send JSON. Your job? Transform that raw text into clean, type-safe Dart objects!

🌐 API Raw JSON text

→

🔄 jsonDecode Map<String, dynamic>

→

🏗️ fromJson() Type-safe Model

→

✨ Your App Safe, clean data

🎯

Today's Project: "Wikipedia Explorer" Models

We'll build a complete data layer for a Wikipedia client:

📄 Article summary model
🔍 Search results model
🧩 Nested JSON structures
🛡️ Pattern matching validation
📦 Organized package structure

Step 1

JSON Parsing Fundamentals

🔬 Live JSON Parser

Paste JSON and see it decoded in real-time:

📝 JSON Input:

📤 Parsed Result:

// Loading...

// Loading...

Step 2

Building Data Model Classes

🏗️ Interactive Model Builder

Design your data model and generate the Dart class:

Class Name:

Fields (name:type:required, comma-separated):

JSON field mapping (optional, e.g., user_id:id):

📄 Generated Dart Class:

class User {
  final int id;
  final String name;
  final String? email;
  final int? age;
  
  User({
    required this.id,
    required this.name,
    this.email,
    this.age,
  });
  
  factory User.fromJson(Map json) {
    return User(
      id: json['user_id'] as int,
      name: json['full_name'] as String,
      email: json['email'] as String?,
      age: json['age'] as int?,
    );
  }
  
  Map toJson() => {
    'user_id': id,
    'full_name': name,
    if (email != null) 'email': email,
    if (age != null) 'age': age,
  };
}

🧪 Test Your Model

JSON to deserialize:

Enter JSON and see the model in action!

Step 3

Pattern Matching for JSON

🎯 Pattern Matching Workshop

See how pattern matching validates and extracts data simultaneously:

👴 Traditional (Pre-Dart 3)

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    id: json['id'] as int,
    name: json['name'] as String,
    email: json['email'] as String?,
    age: json['age'] as int?,
  );
  // No structure validation!
  // Null errors if keys missing!
}

✨ Pattern Matching (Dart 3+)

factory User.fromJson(Map<String, Object?> json) {
  return switch (json) {
    {
      'id': final int id,
      'name': final String name,
      'email': final String? email,
      'age': final int? age,
    } => User(
        id: id,
        name: name,
        email: email,
        age: age,
      ),
    _ => throw FormatException('Invalid: $json'),
  };
}

🧪 Pattern Tester

Select a test case to see pattern matching in action!

Step 4

Handling Nested JSON

🧩 Nested Structure Explorer

Complex JSON:

📄 Generated Nested Models:

class User {
  final int id;
  final Profile profile;
  final List<Post> posts;
  // ...
}

class Profile {
  final String name;
  final Address address;
  // ...
}

class Address {
  final String street;
  final String city;
  final String country;
  // ...
}

class Post {
  final int id;
  final String title;
  // ...
}

Step 5

Serialization: Object → JSON

🔄 Round-Trip Tester

See JSON → Object → JSON in action:

1️⃣ Original JSON

2️⃣ Dart Object

// Parsed object representation

3️⃣ Re-serialized JSON

// jsonEncode result

🏆

Build: Wikipedia Data Models

📄 WikiSummary Model

class WikiSummary {
  final TitlesSet titles;
  final int pageId;
  final String extract;
  final String extractHtml;
  final String lang;
  final String dir;
  final String? url;
  final String? description;
  
  WikiSummary({
    required this.titles,
    required this.pageId,
    required this.extract,
    required this.extractHtml,
    required this.lang,
    required this.dir,
    this.url,
    this.description,
  });
  
  factory WikiSummary.fromJson(Map<String, Object?> json) {
    return switch (json) {
      {
        'titles': final Map<String, Object?> titles,
        'pageid': final int pageId,
        'extract': final String extract,
        'extract_html': final String extractHtml,
        'lang': final String lang,
        'dir': final String dir,
        'content_urls': {
          'desktop': {'page': final String url},
        },
        'description': final String? description,
      } => WikiSummary(
          titles: TitlesSet.fromJson(titles),
          pageId: pageId,
          extract: extract,
          extractHtml: extractHtml,
          lang: lang,
          dir: dir,
          url: url,
          description: description,
        ),
      _ => throw FormatException('Invalid summary JSON'),
    };
  }
  
  Map<String, dynamic> toJson() => {
    'titles': titles.toJson(),
    'pageid': pageId,
    'extract': extract,
    'extract_html': extractHtml,
    'lang': lang,
    'dir': dir,
    if (url != null) 'url': url,
    if (description != null) 'description': description,
  };
}

🔍 SearchResults Model

🏷️ TitlesSet Model

🧪 Test with Real Wikipedia JSON

📤 Model Usage Preview

Test the Wikipedia JSON to see model parsing!

🎮 JSON Challenge: Data Model Master Quiz

📦 Score: 0/6

⚡ Streak: 0

⏱ Time: 0s

🔬 Parsing: 0%