Flutter Json変換エラー

Question

前提・実現したいこと

APIを発行し、Jsonデータを取得後、変換させようとしたところ、エラーが発生しており、どのように修正すれば良いか分からず困っています。

発生している問題・エラーメッセージ

      Article article = Article.fromJson(articleMap);
      print('article: ${article}');

上記の部分が原因により、

[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>'

のエラーメッセージが出力されています。
変換が理由だと思うのですが、よく分かっていません。。

該当のソースコード

main.dart（抜粋）

  Future<void> _selectArticleList() async {
    final response = await http.get("https://qiita.com/api/v2/items",
        headers: {"Content-Type": "application/json", "Authorization": "Bearer xxxxxxxxxxxxxxxxxxxxxx"});
    print("ステータス: ${response.statusCode}");
    print("中身: ${response.body}");
    if (response.statusCode == 200) {
      final articleMap = json.decode(response.body);
      print('articleMap: ${articleMap}');
      Article article = Article.fromJson(articleMap); # ここでエラー
      print('article: ${article}');
    }
  }

article.dart

import 'package:json_annotation/json_annotation.dart';

part 'article.g.dart';

@JsonSerializable()
class Article {
  @JsonKey(name: 'created_at')
  final String createdAt;
  final String id;
  @JsonKey(name: 'likes_count')
  final int likesCount;
  final String title;
  final String url;

  Article({
    this.createdAt,
    this.id,
    this.likesCount,
    this.title,
    this.url,
  });

  factory Article.fromJson(Map<String, dynamic> json) => _$ArticleFromJson(json);

  Map<String, dynamic> toJson() => _$ArticleToJson(this);
}

article.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'article.dart';

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

Article _$ArticleFromJson(Map<String, dynamic> json) {
  return Article(
    createdAt: json['created_at'] as String,
    id: json['id'] as String,
    likesCount: json['likes_count'] as int,
    title: json['title'] as String,
    url: json['url'] as String,
  );
}

Map<String, dynamic> _$ArticleToJson(Article instance) => <String, dynamic>{
      'created_at': instance.createdAt,
      'id': instance.id,
      'likes_count': instance.likesCount,
      'title': instance.title,
      'url': instance.url,
    };

対象のJsonレスポンス

[
  {
    "rendered_body": "\n\u003ch1\u003e\n\u003cspan id=\"qiitateamの運用方法を考える\" class=\"/\u003e\u003c/a\u003e\n",
    "coediting": true,
    "comments_count": 0,
    "created_at": "2019-09-21T08:33:45+09:00",
    "group": null,
    "id": "12qwqeqeqeq",
    "likes_count": 0,
    "private": false,
    "reactions_count": 0,
    "tags": [
      {
        "name": "チュートリアル",
        "versions": []
      }
    ],
    "title": "ステップ6 Qiita:Team運用方法のヒント",
    "updated_at": "2019-09-21T08:33:45+09:00",
    "url": "https://qiita.com/shared/items/xxxxxxx",
    "user": {
      "description": "",
      "facebook_id": "",
      "followees_count": 0,
      "followers_count": 0,
      "github_login_name": null,
      "id": "xxxx",
      "items_count": 0,
      "linkedin_id": "",
      "location": "",
      "name": "S",
      "organization": "",
      "permanent_id": 392512,
      "profile_image_url": "https://xxxxxxxx",
      "team_only": false,
      "twitter_screen_name": null,
      "website_url": ""
    },
    "page_views_count": null
  }
]

よろしくお願いいたします。

Answer 1

Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>'

Article.fromJson の 引数の型は Map<String, dynamic> ですが、
対象のJsonレスポンスは List<Map<String, dynamic>> になっているため、エラーが発生しています。

このAPIは、ArticleのListを返す仕様なので、以下のようにループして変換させる必要があると思います

      final body = json.decode(response.body);
      final articles = body.map((dynamic item) => Article.fromJson(item)).toList();

Comments

[ss-nantoka]

popobot様
ご回答いただきましてありがとうございます。
そういうことだったのですね。

すみません、試しに上記で書いて実行してみたところ、下記のように出力されてしまったのですが、何が足りないのでしょうか？？度々申し訳ございません。
```
flutter: articles: [Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article', Instance of 'Article']
```

[popobot]

この出力は print(articles); の結果ですかね。変換がうまくいって Articleのインスタンスのリストが表示されているように見えます
titleやurlが変換されているか見てみてください

[ss-nantoka]

すみません、ご返信ありがとうございます。
articles.forEach((i) => print(i.title + ':' + i.url));
などで、表示されることを確認しました。
助かりました、ありがとうございました。