Flutter json解析和序列化

前言：

各位同学大家好，相信大家在学习和工作中请求服务端接口的返回的数据的时候 ,都会遇到json解析和序列化的问题 。其他端的语言都有很好用三方库和插件一键格式化我这边就不展开讲了，今天主要讲一下flutter中的json数据是怎么处理的

准备工作

flutter 环境或者dart环境都可以 具体环境搭建教程请大家去看我之前的文章

1简单的json

{
    "msg": "获取数据成功",
    "code": 200,
}

这是一个最简单的json格式的数据 没有过多的嵌套 一个简单的数据模型类就可以解决 我们看下dart 代码

class BackInfoBean {
  String msg;
  int code;

  BackInfoBean ({this.msg,this.code});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
    );
  }
}

具体调用

void main() {
  var json ={
    "msg": "获取数据成功",
    "code": 200,
};
  BackInfoBean _backInfoBean = BackInfoBean .fromJson(json);
  print("msg:   ---   > " + _backInfoBean .city);
  print("code:  ----  >" + _backInfoBean .code.toString());
}

查看输出结果

msg:   ---   > 获取数据成功
code:  ----  > 200

2 含有嵌套的 json

{
    "msg": "获取数据成功",
    "code": 200,
    "data":{
       "username":"高桥凉介"
      ,"password":"123456"
   }
}

这种结构比上一种就稍微复杂一点，但解析起来也很简单，发现 “data” 字段对应的那部分内容其实也是一个 json，那我们也可以用相同的方法对 “data” 字段进行处理，我们新建一个 Data类：

class Data{
  String username;
  String password;
  Data({this.username,this.password});
  factory Data.fromJson(Map<String,dynamic> json) {
    return Data(
      username: json['username'],
      password: json['password'],
    );
  }
}

然后我们修改一下BackInfoBean这个类

class BackInfoBean {
  String msg;
  int code;
 Data data;

  BackInfoBean ({this.msg,this.code});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
    data: json['data'] == null ? null : Data.fromJson(json['data'])
    );
  }
}
//内部类 
class Data{
  String username;
  String password;
  Data({this.username,this.password});
  factory Data.fromJson(Map<String,dynamic> json) {
    return Data(
      username: json['username'],
      password: json['password'],
    );
  }
}

我们把Data数据模型类写在 BackInfoBean的内部类里面
这里需要注意的是，由于 today 是自己定义的对象， json 解析返回的数据类型一定要匹配，并且，存在“today” 字段为空的情况，所以需要判空，下面的代码划重点：

 data: json['data'] == null ? null : Data.fromJson(json['data'])

具体调用

void main() {
  var json ={
    "msg": "获取数据成功",
    "code": 200,
};
  BackInfoBean _backInfoBean = BackInfoBean .fromJson(json);
 Data  _data=_backInfoBean .data;
  print("msg:   ---   > " + _backInfoBean .city);
  print("code:  ----  >" + _backInfoBean .code.toString());
  print("username:  ----  >" + _data.username);
 print("password:  ----  >" + _data.password);
}

输出结果

msg:   ---   > 获取数据成功
code:  ----  > 200
username:   ---   > 高桥凉介
password:  ----  > 123456

3含有列表的json

来看看数据结构

{
    "msg": "获取数据成功",
    "code": 200,
    "data": [
      {
        "id": 12,
        "name": "资深安卓工程师",
        "cname": "今日头条",
        "size": "D轮",
        "salary": "40K-60K",
        "username": "Kimi",
        "title": "HR",
        "page": "0"
      },
      {
        "id": 13,
        "name": "移动端架构师",
        "cname": "银汉游戏",
        "size": "B轮",
        "salary": "15K-20K",
        "username": "刘丽",
        "title": "人事主管",
        "page": "0"
      },
      {
        "id": 14,
        "name": "Java工程师",
        "cname": "37互娱",
        "size": "D轮",
        "salary": "25K-30K",
        "username": "Reiki",
        "title": "HR-M",
        "page": "0"
      },
      {
        "id": 16,
        "name": "iOS工程师",
        "cname": "银汉游戏科技公司",
        "size": "D轮",
        "salary": "15K-20K",
        "username": "马小玲",
        "title": "Java程序员",
        "page": "0"
      },
      {
        "id": 17,
        "name": "java工程师",
        "cname": "4399游戏科技有限公司",
        "size": "C轮",
        "salary": "15K-20k",
        "username": "马小玲",
        "title": "HR-M",
        "page": "0"
      }
    ]
  }

因为在 json 中含有 “[ ]”,这是一种并列的结构，并不需要键值来区分不同。这种结构解析起来也不复杂，其实也是一种嵌套。还是上面的流程，新建 Data类：

class Data {
    String cname;
    int id;
    String name;
    String page;
    String salary;
    String size;
    String title;
    String username;

    Data({this.cname, this.id, this.name, this.page, this.salary, this.size, this.title, this.username});

    factory Data.fromJson(Map<String, dynamic> json) {
        return Data(
            cname: json['cname'], 
            id: json['id'], 
            name: json['name'], 
            page: json['page'], 
            salary: json['salary'], 
            size: json['size'], 
            title: json['title'], 
            username: json['username'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['cname'] = this.cname;
        data['id'] = this.id;
        data['name'] = this.name;
        data['page'] = this.page;
        data['salary'] = this.salary;
        data['size'] = this.size;
        data['title'] = this.title;
        data['username'] = this.username;
        return data;
    }

由于是含有多个该对象，所以需要在 BackInfoBean 中 新建一个 List，并且泛型声明为 Data

class BackInfoBean {
  String msg;
  int code;
 List<Data>data;
  BackInfoBean ({this.msg,this.code，this.data});
  factory BackInfoBean .fromJson(Map<String,dynamic> json) {
   var tempData = json['data'] as List;
    List<Data> dataList = tempData .map((i) => Index.fromJson(i)).toList();
    return BackInfoBean (
      msg: json['msg'],
      code: json['code'],
     indexes: dataList
    );
  }
}

具体调用：

  Company2 company2=Company2.fromJson(jsondata);
   String msg=company2.msg;
    int code=company2.code;
   List  _getdata =company2.data;
   print("msg   --- >"+msg);
    print("code   --- >"+code.toString());
    print("_getdata   --- >"+_getdata.toString());

以上就是各种json数据的手动解析

插件解析json

接下我就介绍一些好用的插件（自动生成model类的插件）分享给大家

第一个插件 flutter json formt

只需要在android studio setting - plugins 里面搜索就行了 安装完成然后重启Android studio
我们创建新的dart类 按住键盘 alt+inster 键

然后选择 flutter json formt

我们 把json数据粘贴进去

然后点击OK就行了
具体生成model如下

/// msg : "获取数据成功"
/// code : 200
/// data : [{"id":4,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":5,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":6,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":7,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":8,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":9,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":11,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":12,"name":"资深安卓工程师","cname":"今日头条","size":"D轮","salary":"40K-60K","username":"Kimi","title":"HR","page":"0"},{"id":13,"name":"移动端架构师","cname":"银汉游戏","size":"B轮","salary":"15K-20K","username":"刘丽","title":"人事主管","page":"0"},{"id":14,"name":"Java工程师","cname":"37互娱","size":"D轮","salary":"25K-30K","username":"Reiki","title":"HR-M","page":"0"},{"id":16,"name":"iOS工程师","cname":"银汉游戏科技公司","size":"D轮","salary":"15K-20K","username":"王霞","title":"Java程序员","page":"0"},{"id":17,"name":"java工程师","cname":"4399游戏科技有限公司","size":"C轮","salary":"15K-20k","username":"王霞","title":"HR-M","page":"0"}]

class Company {
  String msg;
  int code;
  List<DataBean> data;

  static Company fromMap(Map<String, dynamic> map) {
    if (map == null) return null;
    Company companyBean = Company();
    companyBean.msg = map['msg'];
    companyBean.code = map['code'];
    companyBean.data = List()..addAll(
        (map['data'] as List ?? []).map((o) => DataBean.fromMap(o))
    );
    return companyBean;
  }

  Map toJson() => {
    "msg": msg,
    "code": code,
    "data": data,
  };
}

/// id : 4
/// name : "资深安卓工程师"
/// cname : "今日头条"
/// size : "D轮"
/// salary : "40K-60K"
/// username : "Kimi"
/// title : "HR"
/// page : "0"

class DataBean {
  int id;
  String name;
  String cname;
  String size;
  String salary;
  String username;
  String title;
  String page;

  static DataBean fromMap(Map<String, dynamic> map) {
    if (map == null) return null;
    DataBean dataBean = DataBean();
    dataBean.id = map['id'];
    dataBean.name = map['name'];
    dataBean.cname = map['cname'];
    dataBean.size = map['size'];
    dataBean.salary = map['salary'];
    dataBean.username = map['username'];
    dataBean.title = map['title'];
    dataBean.page = map['page'];
    return dataBean;
  }

  Map toJson() => {
    "id": id,
    "name": name,
    "cname": cname,
    "size": size,
    "salary": salary,
    "username": username,
    "title": title,
    "page": page,
  };
}

具体调用

            Company company=Company.fromMap(jsondata);
                 String msg=company.msg;
                 int code=company.code;
                 _getdatabean=company.data;
                 print("msg   --- >"+msg);
                 print("code   --- >"+code.toString());
                 print("_getdata   --- >"+_getdatabean.toString());

第二个插件 Dart classses from JSON

只需要在android studio setting - plugins 里面搜索就行了 安装完成然后重启Android studio
我们创建新的dart 类 按住键盘 alt+inster 键 如图

然后选择 Dart classses from JSON

我们把json数据粘贴进去 然后输入dart 类名

然后我们选择 Cenerate
具体生成model 如下 :

class Company2 {
    List<Data>data;
    int code;
    String msg;
    Company2({this.data, this.code, this.msg});
    factory Company2.fromJson(Map<String, dynamic> json) {
        return Company2(
           data: json['data'] != null ? (json['data'] as List).map((i) => Data.fromJson(i)).toList() : null, 
            code: json['code'], 
            msg: json['msg'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['code'] = this.code;
        data['msg'] = this.msg;
        if (this.data != null) {
            data['data'] = this.data.map((v) => v.toJson()).toList();
        }
        return data;
    }
}

class Data {
    String cname;
    int id;
    String name;
    String page;
    String salary;
    String size;
    String title;
    String username;

    Data({this.cname, this.id, this.name, this.page, this.salary, this.size, this.title, this.username});

    factory Data.fromJson(Map<String, dynamic> json) {
        return Data(
            cname: json['cname'], 
            id: json['id'], 
            name: json['name'], 
            page: json['page'], 
            salary: json['salary'], 
            size: json['size'], 
            title: json['title'], 
            username: json['username'], 
        );
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['cname'] = this.cname;
        data['id'] = this.id;
        data['name'] = this.name;
        data['page'] = this.page;
        data['salary'] = this.salary;
        data['size'] = this.size;
        data['title'] = this.title;
        data['username'] = this.username;
        return data;
    }
}

具体调用：

  Company2 company2=Company2.fromJson(jsondata);
      String msg=company2.msg;
       int code=company2.code;
       _getdata=company2.data;
       print("msg   --- >"+msg);
        print("code   --- >"+code.toString());
      print("_getdata   --- >"+_getdata.toString());

以上就Android studio或者是idea 里面比较好用的插件 介绍给大家 还有其他更好用的插件/三方库（例如 JsonTodart 插件和 json_serializable 三方库 ）这边因为时间原因篇幅有限就不展开讲了 下次由机会再给大家好好讲讲

最后总结 ：

json数据 是前端 移动端 跨平台 平常 都会碰到的数据格式 这次就flutter的这方面 介绍给大家几种常见的数据格式的解析以及 两个好用的插件 希望能帮助到大家 ，有兴趣学的的同学可以私下多多交流 ，如果觉得文章还不错麻烦给个star 和转发 谢谢 （个人qq/微信：1693891473）

QQ交流群：