首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Dart/ flutter中映射和显示嵌套的JSON?

在Dart/Flutter中,可以使用内置的json_serializable库来映射和显示嵌套的JSON数据。

首先,需要在项目的pubspec.yaml文件中添加json_serializable和build_runner依赖:

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  json_serializable: ^4.1.0
  build_runner: ^2.1.0

然后,在需要使用JSON数据的Dart类上添加注解,并运行build_runner命令生成相应的序列化代码。

例如,假设有一个嵌套的JSON数据如下:

代码语言:txt
复制
{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
}

可以创建一个对应的Dart类,并使用json_serializable库进行注解:

代码语言:txt
复制
import 'package:json_annotation/json_annotation.dart';

part 'person.g.dart';

@JsonSerializable()
class Person {
  String name;
  int age;
  Address address;

  Person({this.name, this.age, this.address});

  factory Person.fromJson(Map<String, dynamic> json) => _$PersonFromJson(json);
  Map<String, dynamic> toJson() => _$PersonToJson(this);
}

@JsonSerializable()
class Address {
  String street;
  String city;

  Address({this.street, this.city});

  factory Address.fromJson(Map<String, dynamic> json) => _$AddressFromJson(json);
  Map<String, dynamic> toJson() => _$AddressToJson(this);
}

接下来,运行以下命令生成序列化代码:

代码语言:txt
复制
flutter pub run build_runner build

生成的代码将会自动放置在相应的.g.dart文件中。

现在,可以使用生成的代码来进行JSON数据的序列化和反序列化:

代码语言:txt
复制
import 'dart:convert';

void main() {
  String jsonStr = '{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"New York"}}';
  
  Map<String, dynamic> json = jsonDecode(jsonStr);
  Person person = Person.fromJson(json);
  
  print(person.name); // 输出:John Doe
  print(person.address.city); // 输出:New York
  
  Map<String, dynamic> newJson = person.toJson();
  String newJsonStr = jsonEncode(newJson);
  
  print(newJsonStr); // 输出:{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"New York"}}
}

这样,就可以在Dart/Flutter中映射和显示嵌套的JSON数据了。

推荐的腾讯云相关产品:腾讯云对象存储(COS),用于存储和管理大规模的非结构化数据,适用于图片、音视频、文档等各种类型的文件存储。产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券