将 JSON 解析为 Dart 模型 - Javascript

在 Dart 编程中，我们常常需要将从 API 接口返回的 JSON 数据解析成 Dart 对象以便于我们操作。本文将介绍如何使用 Dart 语言将 JSON 数据解析成 Dart 对象。

Step 1 - 创建 Dart 类

首先，我们需要创建一个 Dart 类，用来存储解析出来的数据。通常情况下，我们会将这个类定义在一个独立的文件中，以便于其他文件使用。以解析用户数据为例，代码如下：

class User {
  final int id;
  final String name;
  final String email;

  User({this.id, this.name, this.email});

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

在这个类中，我们定义了三个属性 id、name 和 email，它们的类型分别为 int、String、String。此外，我们还定义了一个构造函数和一个工厂函数。这个工厂函数将接收一个 Map 类型的 json 数据，并将它转换成 User 类型的对象。

Step 2 - 解析 JSON 数据

在 Dart 中，我们可以使用 json.decode() 函数将 JSON 字符串解析成 Dart 对象。例如，假设我们从 API 接口返回了以下 JSON 数据：

{
  "id": 1,
  "name": "John Doe",
  "email": "johndoe@example.com"
}

我们可以使用下面的代码将它解析成 User 类型的对象：

import 'dart:convert';

void main() {
  String jsonString = '{"id": 1, "name": "John Doe", "email": "johndoe@example.com"}';
  Map<String, dynamic> jsonMap = json.decode(jsonString);
  User user = User.fromJson(jsonMap);
  print(user.name); // 输出 "John Doe"
}

在这个例子中，我们首先将 JSON 字符串转换成一个 Map 对象，接着我们使用 User.fromJson() 工厂函数将这个 Map 对象转换成 User 对象。

Step 3 - 使用解析出来的数据

一旦我们将 JSON 数据解析成了 Dart 对象，我们就可以像使用普通的 Dart 对象一样使用它了。例如，如果我们想要将解析出来的数据展示到页面上，我们可以使用 Flutter 提供的 Widgets 或者自己编写 UI 组件。例如，假设我们使用了 Flutter，我们可以在 build() 函数中返回一个 Text 组件，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    User user = User.fromJson(jsonMap);
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('User Info'),
        ),
        body: Center(
          child: Text(user.name),
        ),
      ),
    );
  }
}

注意，这里的 jsonMap 表示我们从 API 接口获取的 JSON 数据已经被解析成了一个 Map 对象。在实际开发中，我们可能需要在 initState() 函数中调用接口获取数据，然后在 build() 函数中使用它。