[译]在 Flutter 中解析复杂的 JSON

时间  2019-11-08 标签 flutter 解析 复杂 json

我必须认可，在 Flutter/Dart 中使用 JSON 后，我一直想念 gson 的 Android 世界。当我开始使用 Flutter 中的 API 时，JSON 解析真的让我很困扰。并且我敢肯定，它也让不少初学者感到困惑。前端

咱们将在这篇博客中使用内置的 dart:convert 库。这是最基本的解析方法，只有在你刚开始使用 Flutter 或者你正在写一个小项目时才建议使用它。不过，了解一些 Flutter 中 JSON 解析的基础知识很是重要。若是你精通这个，或者你须要写更大的项目时，能够考虑像 json_serializable 等代码生成器库。若是可能的话，我会在之后的文章中介绍它们。android

Fork 这个示例项目。它包含这篇博客中的全部代码，你能够对照着实践一下。ios

JSON 结构 #1：简单的 map

让咱们从一个简单的 JSON 结构开始 —— student.jsongit

{
  "id":"487349",
  "name":"Pooja Bhaumik",
  "score" : 1000
}
复制代码

规则 #1： 肯定结构。Json 字符串将具备 Map（键值对）或 List of Maps。github

规则 #2：用花括号开始？这是 map。用方括号开始？那是 List of maps。json

student.json 明显是 map（好比，id 是键，487349 是 id 的值）。后端

让咱们为这个 json 结构作一个 PODO（Plain Old Dart Object？）文件。你能够在示例项目的 student_model.dart 文件中找到这段代码。数组

class Student{
  String studentId;
  String studentName;
  int studentScores;

  Student({
    this.studentId,
    this.studentName,
    this.studentScores
 });
}
复制代码

Perfect！ 是这样吗？ 由于 json 映射和这个 PODO 文件之间没有映射。甚至实体名称也不匹配。 我知道我知道。 咱们尚未完成。咱们必须将这些类成员映射到 json 对象。为此，咱们须要建立一个 factory 方法。根据 Dart 文档，咱们在实现一个构造函数时使用 factory 关键字时，这个构造函数不会老是建立其类的新实例，而这正是咱们如今所须要的。安全

factory Student.fromJson(Map<String, dynamic> parsedJson){
    return Student(
      studentId: parsedJson['id'],
      studentName : parsedJson['name'],
      studentScores : parsedJson ['score']
    );
  }
复制代码

在这里，咱们建立了一个叫作 Student.fromJson 的工厂方法，用来简单地反序列化你的 json。bash

我是一个小菜鸡，能告诉我反序列化到底是什么吗？

固然。咱们首先要向你介绍序列化和反序列化。序列化 简单来说就是把数据（可能在对象中）写成字符串，反序列化 正好相反。它获取原始数据并重建对象模型。在本文中，咱们主要讨论反序列化部分。在第一部分中，咱们从 student.json 反序列化 json 字符串。

因此咱们的工厂方法也能够称为咱们的转换器方法。

还必须注意 fromJson 方法中的参数。它是一个 Map<String, dynamic> 这意味着它将 String 键映射为 dynamic 值。这正是咱们须要识别它结构的缘由。若是这个 json 结构是一个映射列表，那么这个参数会有所不一样。

但为何选择动态呢？ 让咱们先看一下另外一个 json 结构来回答你的问题。

name 是一个 Map<String，String>，majors 是 String 和 List 的 Map，subject 是 String 和 List 的 Map。

由于键老是一个 string 而且值能够是任何类型，因此咱们将它保持为 dynamic 以保证安全。

在 这里 检查 student_model.dart 的完整代码。

访问对象

让咱们写 student_services.dart，它具备调用 Student.fromJson 的代码，可以从 Student 对象中获取值。

片断 #1：imports

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'package:flutter_json/student_model.dart';
复制代码

最后导入的是你的模型文件名。

片断 #2：加载 Json Asset（可选）

Future<String> _loadAStudentAsset() async {
  return await rootBundle.loadString('assets/student.json');
}
复制代码

在这个特定项目中，咱们的 json 文件放在 assets 文件夹下，因此咱们必须这样加载 json。但若是你的 json 文件放在云端，你也能够进行网络调用。网络调用不在咱们这篇文章的讨论范围内。

片断 #3：加载响应

Future loadStudent() async {
  String jsonString = await _loadAStudentAsset();
  final jsonResponse = json.decode(jsonString);
  Student student = new Student.fromJson(jsonResponse);
  print(student.studentScores);
}
复制代码

在 loadStudent() 方法中， 第一行：从 assets 中加载原始 json 字符串。 第二行：解码咱们获得的 json 字符串。 第三行：如今咱们经过调用 Student.fromJson 方法反序列化解码的 json 响应，这样咱们如今可使用 Student 对象来访问咱们的实体。 第四行：就像咱们在这里作的同样，咱们在 Student 类里打印了 studentScores。

检查 Flutter 控制台以查看打印的全部值。（在 Android Studio 中，它在运行选项下）

瞧！你刚刚完成了第一次 JSON 解析（或没有）。 注意：请记住这里的 3 个片断，咱们将把它用于下一组 json 解析（只更改文件名和方法名），我不会在这里重复代码。但你能够在示例项目中找到全部内容。

JSON 结构 #2：含有数组的简单结构

如今咱们要征服一个和上面那个相似的 json 结构，但不是单一值的，它可能有一个值数组。

{
  "city": "Mumbai",
  "streets": [
    "address1",
    "address2"
  ]
}
复制代码

因此在这个 address.json 中，咱们有一个包含简单 String 值的 city 实体，但 streets 是一个 String 数组。 就我所知，Dart 并无数组这种数据类型，但它有 List，因此这里 streets 是一个 List<String>。

如今咱们要检查一下 规则 #1 和 规则 #2。这绝对是一个 map，由于这是以花括号开头的。streets 仍然是一个 List，但咱们稍后才会考虑这个。

因此 address_model.dart 一开始看起来像是这样的

class Address {
  final String city;
  final List<String> streets;

  Address({
    this.city,
    this.streets
  });
}
复制代码

如今它是一个 map，咱们的 Address.fromJson 方法 仍然有一个 Map<String, dynamic> 参数。

factory Address.fromJson(Map<String, dynamic> parsedJson) {

  return new Address(
      city: parsedJson['city'],
      streets: parsedJson['streets'],
  );
}
复制代码

如今经过添加上面提到的三个代码片断来构造 address_services.dart。必须记住要放入正确的文件名和方法名。示例项目已经为您构建了 _address_services.dart_。

若是你如今运行它，你会发现一个小错误。

type 'List<dynamic>' is not a subtype of type 'List<String>'
复制代码

我告诉你，这些错误几乎在我 Dart 开发的每一步中都会出现。你也会遇到它们。那么让我解释一下这是什么意思。咱们正在请求 List<String> 但咱们获得一个 List<dynamic> ，由于咱们的应用程序还没法识别它的类型。

因此咱们必须把这个显式地转换成 List<String>。

var streetsFromJson = parsedJson['streets'];
List<String> streetsList = new List<String>.from(streetsFromJson);
复制代码

在这里，咱们首先把变量映射到 streetsFromJson streets 实体。streetsFromJson 仍然是一个 List<dynamic>。如今咱们显式地创造了一个 List<String> streetsList，它包含了 来自 streetsFromJson的全部元素。

在 这里 检查更新的方法。注意如今的返回语句。 如今你能够用 _address_services.dart_ 来运行它，它会完美运行。

Json 结构 #3：简单的嵌套结构

如今若是咱们有一个像来自 shape.json 的嵌套结构的话会怎样呢？

{
  "shape_name":"rectangle",
  "property":{
    "width":5.0,
    "breadth":10.0
  }
}
复制代码

这里，property 包含一个对象而不是基本的数据类型。 那么 POOD 看起来会是怎样呢？

好啦，让咱们先休息一会。 在 shape_model.dart 中，让咱们先为 Property 建一个类。

class Property{
  double width;
  double breadth;

  Property({
    this.width,
    this.breadth
});
}
复制代码

如今让咱们为 Shape 建立一个类。我将这两个类保存在同一个 Dart 文件中。

class Shape{
  String shapeName;
  Property property;

  Shape({
    this.shapeName,
    this.property
  });
}
复制代码

注意第二个数据成员 property 就是咱们前面 Property 类的对象。

规则 #3：对于嵌套结构，首先建立类和构造函数，而后从底层添加工厂方法。

在底层上，个人意思是，首先咱们征服 _Property_ 类，而后咱们在 _Shape_ 类上再上一级。固然，这只是个人我的看法，不是 Flutter 规则。

factory Property.fromJson(Map<String, dynamic> json){
  return Property(
    width: json['width'],
    breadth: json['breadth']
  );
}
复制代码

这是一个简单的 map。

可是对于在 Shape 类中的工厂方法，咱们只能这样作。

factory Shape.fromJson(Map<String, dynamic> parsedJson){
  return Shape(
    shapeName: parsedJson['shape_name'],
    property : parsedJson['property']
  );
}
复制代码

property : parsedJson['property'] 首先，它会抛出一个类型不匹配错误 ——

type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'Property'
复制代码

其次，嘿，咱们刚刚为 Property 作了这个优雅的类，我没有看到它在任何地方使用。

没错，咱们必须在这里映射咱们的 Property 类。

factory Shape.fromJson(Map<String, dynamic> parsedJson){
  return Shape(
    shapeName: parsedJson['shape_name'],
    property: Property.fromJson(parsedJson['property'])
  );
}
复制代码

因此基本上，咱们从 Property 类调用 Property.fromJson 方法，不管获得什么，咱们都将它映射到 property 实体。简单！在 这里 检查你的代码。

用你的 shape_services.dart 运行它，你会对运行结果感到满意的。

JSON 结构 #4：含有 Lists 的嵌套结构

让咱们检查咱们的 product.json

{
  "id":1,
  "name":"ProductName",
  "images":[
    {
      "id":11,
      "imageName":"xCh-rhy"
    },
    {
      "id":31,
      "imageName":"fjs-eun"
    }
  ]
}
复制代码

好的，如今咱们愈来愈深刻了。哇哦，我在里面看到了一个对象列表。

是的，因此这个结构有一个对象列表，但它自己仍然是一个 map。（参考规则 #1 和 规则 #2）。如今参考 规则 #3，让咱们构造咱们的 product_model.dart。

如今咱们来建立 Product 和 Image 这两个类。 注意：_Product_ 会有一个数据成员，它是 _Image_ 的 List

class Product {
  final int id;
  final String name;
  final List<Image> images;

  Product({this.id, this.name, this.images});
}

class Image {
  final int imageId;
  final String imageName;

  Image({this.imageId, this.imageName});
}
复制代码

Image 的工厂方法会很是简单和基础。

factory Image.fromJson(Map<String, dynamic> parsedJson){
 return Image(
   imageId:parsedJson['id'],
   imageName:parsedJson['imageName']
 );
}
复制代码

这里是 Product 的工厂方法

factory Product.fromJson(Map<String, dynamic> parsedJson){

  return Product(
    id: parsedJson['id'],
    name: parsedJson['name'],
    images: parsedJson['images']
  );
}
复制代码

这里明显会抛出一个 runtime error

type 'List<dynamic>' is not a subtype of type 'List<Image>'
复制代码

若是咱们这样作，

images: Image.fromJson(parsedJson['images'])
复制代码

这也是绝对错误的，它会当即引起错误，由于你没法将 Image 对象分配给 List<Image>。

因此咱们必须建立一个 List<Image> 而后将它分配给 images

var list = parsedJson['images'] as List;
print(list.runtimeType); //returns List<dynamic>
List<Image> imagesList = list.map((i) => Image.fromJson(i)).toList();
复制代码

list 在这里是一个 List。如今咱们经过调用 Image.fromJson 遍历整个列表，并把 list 中的每一个对象映射到 Image 中，而后咱们将每一个 map 对象放入一个带有 toList() 的新列表中，并将它存储在 List<Image> imagesList。能够在这里 查看完整代码。

JSON 结构 #5：map 列表

如今让咱们来看一下 photo.json

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  }
]
复制代码

哦，规则 #1 和 规则 #2 能够看出这不是一个 map，由于这个 json 字符串以方括号开头。因此这是一个对象列表？ 是的，这里的对象是 Photo（或者你想称之为的任何东西）。

class Photo{
  final String id;
  final String title;
  final String url;

  Photo({
    this.id,
    this.url,
    this.title
}) ;

  factory Photo.fromJson(Map<String, dynamic> json){
    return new Photo(
      id: json['id'].toString(),
      title: json['title'],
      url: json['json'],
    );
  }
}
复制代码

但它是一个 _Photo_ 列表，因此这意味着你必须建立一个包含 _List<Photo>_ 的类？

是的，我建议这样。

class PhotosList {
  final List<Photo> photos;

  PhotosList({
    this.photos,
  });
}
复制代码

同时请注意，这个 json 字符串是一个映射列表。所以，在咱们的工厂方法中，不会有一个 Map<String, dynamic> 参数，由于它是一个 List。这就是为何首先要肯定结构。因此咱们的新参数是 List<dynamic>。

factory PhotosList.fromJson(List<dynamic> parsedJson) {

    List<Photo> photos = new List<Photo>();

    return new PhotosList(
       photos: photos,
    );
  }
复制代码

这样会抛出一个错误。

Invalid value: Valid value range is empty: 0
复制代码

嘿，由于咱们永远不能使用 Photo.fromJson 方法。 若是咱们在列表初始化以后添加这行代码会怎样？

photos = parsedJson.map((i)=>Photo.fromJson(i)).toList();
复制代码

与前面相同的概念，咱们没必要把它映射到 json 字符串中的任何键，由于它是 List 而不是 map。代码在 这里.

JSON 结构 #6：复杂的嵌套结构

这是 page.json.

我会要求你解决这个问题。它已包含在示例项目中。你只须要为此构建模型和服务文件。可是在给你提示以前我不会总结（若是你须要任何提示的话）。

规则 #1 and 规则 #2 同样使用。首先肯定结构。这是一个 map。因此 1-5 的全部 json 结构都有用。

规则 #3 要求你先建立类和构造函数，而后从底层添加工厂方法。不过还有一个提示，还要记得从深层/底层添加类。例如，对于这个 json 结构，首先为 Image 建立类，而后为 Data 和 Author 建立类，而后建立主类 Page。并以相同的顺序添加工厂方法。

对于 Image 和 Data 类，参考 Json 结构 #4。 对于 Author 类，参考 Json 结构 #3

给初学者的建议：在试验任何新 asset 时，请记得在 pubspec.yaml 文件中声明它。

这就是这篇 Fluttery 文章的内容。这篇文章可能不是最好的 JSON 解析文章（由于我还在学习不少东西），但我但愿它能帮助你入门。

我弄错了什么吗？在评论中提一下。我洗耳恭听。

若是你学到了一两件点知识，请尽量多地拍手 👏 以表示你的支持！这会鼓励我写更多的文章。

Hello World，我是 Pooja Bhaumik。一个有创意的开发人员和理性的设计师。你能够在 Linkedin 或 GitHub 或 Twitter 上关注我？若是这对你来讲太 social 了，若是你想和我谈论对科技的想法，请发邮件到 pbhaumik26@gmail.com。

祝你度过美好的一天！

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

联系我们 沪ICP备13005482号-10