在 Flutter 中解析复杂 json 的问题答案

【问题标题】：Problems parsing complex json in Flutter在 Flutter 中解析复杂 json 的问题
【发布时间】：2020-10-21 23:07:12
【问题描述】：

我在转换以下响应时遇到问题 ->

{
"data": [
{
  "_id": "1AoJoWJ5Hdx3nZ5t",
  "title": "Orange is the new black",
  "imageUrl": "/1532353304050-oinb.jpg",
  "likesCount": 674
 },
{
  "_id": "AeqiQJewtTvMPc1B",
  "title": "X-Files",
  "imageUrl": "/1532353346638-xfiles.png",
  "likesCount": 6155
 },
{
  "_id": "gPkzfXoJXX5TuTuM",
  "title": "Star Trek: Voyager",
  "imageUrl": "/1532353336145-voyager.jpg",
  "likesCount": 23
 },
{
  "_id": "vQBQcYwtF9GWWJyK",
  "title": "South Park",
  "imageUrl": "/1532353313669-southpark.jpg",
  "likesCount": 56
 },
{
  "_id": "wjLUixBQ4sirMAYw",
  "title": "The Simpsons",
  "imageUrl": "/1532353326075-thesimpsons.jpg",
  "likesCount": 65
   }
 ]
}

我尝试使用 jsonserializer 插件以及 json_annotations 插件，但无济于事。我确实尝试使用 quicktype.io 获得一个解析器类，但它似乎根本不起作用。有人可以指导我或帮助我解决这个问题吗？谢谢！

【问题讨论】：

为什么不实现“.fromJson”并返回你的愿望地图

标签： arrays json flutter dart response

【解决方案1】：

Android Studio 中有一个很好的插件。
JSON 到 Dart 类。
安装插件后，请执行以下操作。

按 ALT + L
提供类名并粘贴您的 JSON 响应
你就完成了。

收到回复后，请执行以下操作

import 'dart:convert';
var decodedData = json.decode(response.body);
var data = Data.fromJson(decodedData)

如果您需要回复的状态码，那么response.statusCode

【讨论】：

嘿！感谢回复。我明白了，但是之后我该怎么处理回复？我是做 Data.fromJson 还是 Demo.fromJson 因为无论我尝试什么都会收到错误消息。
我什至在发布问题之前就在尝试这样做，但我得到了空值。

【解决方案2】：

我遵循了 Flutter 的这个官方文档，它对我有用。

https://flutter.dev/docs/development/data-and-backend/json

按照这些步骤解决您的问题。

如文档所示添加依赖项。

dependencies:
  # Your other regular dependencies here
  json_annotation: <latest_version>

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: <latest_version>
  json_serializable: <latest_version>

创建stackoverflow.dart

import 'package:json_annotation/json_annotation.dart';

part 'stackoverflow.g.dart';

@JsonSerializable()
class StackOverFlowModel {
  @JsonKey(name: '_id')
  String id;
  String title;
  String imageUrl;
  int likesCount;

  StackOverFlowModel();
  
  factory StackOverFlowModel.fromJson(Map<String, dynamic> json) =>
      _$StackOverFlowModelFromJson(json);
  Map<String, dynamic> toJson() => _$StackOverFlowModelToJson(this);
}

将变量名命名为 _id 会将 Dart 与私有变量混淆。最好使用 JsonKey 注释给它一个 JSON 名称。

在终端中运行flutter pub run build_runner build。
stackoverflow.g.dart 会像这样生成。

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'stackoverflow.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

StackOverFlowModel _$StackOverFlowModelFromJson(Map<String, dynamic> json) {
  return StackOverFlowModel()
    ..id = json['_id'] as String
    ..title = json['title'] as String
    ..imageUrl = json['imageUrl'] as String
    ..likesCount = json['likesCount'] as int;
}

Map<String, dynamic> _$StackOverFlowModelToJson(StackOverFlowModel instance) =>
    <String, dynamic>{
      '_id': instance.id,
      'title': instance.title,
      'imageUrl': instance.imageUrl,
      'likesCount': instance.likesCount
    };

为了测试这样做

Map map = {
    "data": [
      {
        "_id": "1AoJoWJ5Hdx3nZ5t",
        "title": "Orange is the new black",
        "imageUrl": "/1532353304050-oinb.jpg",
        "likesCount": 674
      },
      {
        "_id": "AeqiQJewtTvMPc1B",
        "title": "X-Files",
        "imageUrl": "/1532353346638-xfiles.png",
        "likesCount": 6155
      },
      {
        "_id": "gPkzfXoJXX5TuTuM",
        "title": "Star Trek: Voyager",
        "imageUrl": "/1532353336145-voyager.jpg",
        "likesCount": 23
      },
      {
        "_id": "vQBQcYwtF9GWWJyK",
        "title": "South Park",
        "imageUrl": "/1532353313669-southpark.jpg",
        "likesCount": 56
      },
      {
        "_id": "wjLUixBQ4sirMAYw",
        "title": "The Simpsons",
        "imageUrl": "/1532353326075-thesimpsons.jpg",
        "likesCount": 65
      }
    ]
  };

  List<StackOverFlowModel> list = List.generate(map['data'].length,
      (index) => StackOverFlowModel.fromJson(map['data'][index]));

  print(list);

【讨论】：