APIからGETしてきた値をFutureで取りたいです

Question

やりたいことは簡単なのですがJSONが少々複雑で難しいです…><
よくあるAPIから値をGETしてきてFutureBuilderでdata表示するものがほしいです。
modelは https://javiercbk.github.io/json_to_dart/ でジェネレートしたものを使ってるのですがよくわからずで。。

APIからGETしてくるJSONがこちらで。

{
    "data": [
        {
            "id": "1",
            "type": "room",
            "attributes": {
                "title": "room1",
                "description": "room1 description",
                "image_path": "path"
            },
            "relationships": {
                "user": {
                    "data": {
                        "id": "1",
                        "type": "user"
                    }
                },
                "category": {
                    "data": {
                        "id": "1",
                        "type": "category"
                    }
                },
                "genre": {
                    "data": {
                        "id": "1",
                        "type": "genre"
                    }
                }
            }
        },
        {
            "id": "2",
            "type": "room",
            "attributes": {
                "title": "room2",
                "description": "room2 description",
                "image_path": "path"
            },
            "relationships": {
                "user": {
                    "data": {
                        "id": "3",
                        "type": "user"
                    }
                },
                "category": {
                    "data": {
                        "id": "2",
                        "type": "category"
                    }
                },
                "genre": {
                    "data": {
                        "id": "2",
                        "type": "genre"
                    }
                }
            }
        },
        {
            "id": "3",
            "type": "room",
            "attributes": {
                "title": "room3",
                "description": "room3 description",
                "image_path": "path"
            },
            "relationships": {
                "user": {
                    "data": {
                        "id": "3",
                        "type": "user"
                    }
                },
                "category": {
                    "data": {
                        "id": "2",
                        "type": "category"
                    }
                },
                "genre": {
                    "data": {
                        "id": "2",
                        "type": "genre"
                    }
                }
            }
        }
    ],

class Autogenerated {
  List<Data> data;
  List<Included> included;

  Autogenerated({this.data, this.included});

  Autogenerated.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = new List<Data>();
      json['data'].forEach((v) {
        data.add(new Data.fromJson(v));
      });
    }
    if (json['included'] != null) {
      included = new List<Included>();
      json['included'].forEach((v) {
        included.add(new Included.fromJson(v));
      });
    }
  }

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

class Data {
  String id;
  String type;
  Attributes attributes;
  Relationships relationships;

  Data({this.id, this.type, this.attributes, this.relationships});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    type = json['type'];
    attributes = json['attributes'] != null
        ? new Attributes.fromJson(json['attributes'])
        : null;
    relationships = json['relationships'] != null
        ? new Relationships.fromJson(json['relationships'])
        : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['type'] = this.type;
    if (this.attributes != null) {
      data['attributes'] = this.attributes.toJson();
    }
    if (this.relationships != null) {
      data['relationships'] = this.relationships.toJson();
    }
    return data;
  }
}

class Attributes {
  String title;
  String description;
  String imagePath;

  Attributes({this.title, this.description, this.imagePath});

  Attributes.fromJson(Map<String, dynamic> json) {
    title = json['title'];
    description = json['description'];
    imagePath = json['image_path'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['title'] = this.title;
    data['description'] = this.description;
    data['image_path'] = this.imagePath;
    return data;
  }
}

class Attributes {
  String name;
  String username;
  Null introduction;
  Null profileImagePath;
  Null headerImagePath;
  String lastLoggedIn;

  Attributes(
      {this.name,
      this.username,
      this.introduction,
      this.profileImagePath,
      this.headerImagePath,
      this.lastLoggedIn});

  Attributes.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    username = json['username'];
    introduction = json['introduction'];
    profileImagePath = json['profileImagePath'];
    headerImagePath = json['headerImagePath'];
    lastLoggedIn = json['lastLoggedIn'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['username'] = this.username;
    data['introduction'] = this.introduction;
    data['profileImagePath'] = this.profileImagePath;
    data['headerImagePath'] = this.headerImagePath;
    data['lastLoggedIn'] = this.lastLoggedIn;
    return data;
  }
}

import 'dart:convert' show json, jsonDecode;
import 'package:json_annotation/json_annotation.dart';
import 'package:http/http.dart' as http;
import 'package:api_test/models/room.dart';

@JsonSerializable()

class WebService {
   static const baseurl = '***api url***';
  Future fetchRoom() async {
    final response = await http.get('${baseurl}rooms');
    if (response.statusCode == 200) {
      final res = json.decode(response.body)['data'] as List;
      final res2 = json.decode(response.body)['data'][0]['attributes'] as Map;
      final res3 = json.decode(response.body)['data'][1]['attributes'] as Map;

      print(res2);
//flutter: {title: room1, description: room1 description, image_path: jiroewa}
      print(res3);
//flutter: {title: room2, description: room2 description, image_path: jiroewa}


      return new Attributes.fromJson(res);
    }
  }

          body: Center(
              child: Column(children: [
            FutureBuilder<dynamic>(
              future: WebService().fetchRoom(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(
                    children: [
                      Text(snapshot.data.title.toString()),
                    ],
                  );
                } else if (snapshot.connectionState ==
                    ConnectionState.waiting) {
                  return const Center(
                    child: Text('waiting'),
                  );
                  // ignore: invariant_booleans
                } else if (snapshot.data == null) {
                  return Center(
                    child: Text(snapshot.data.toString()),
                  );
                } else {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ]))

という感じです。
現状、JSONをデコードしてくるのは出来るんですが配列？に変換するところが出来ていないのでmain.dartで取得できず、error表示という認識でいます。

Error: The argument type 'List<dynamic>' can't be assigned to the parameter type
'Map<String, dynamic>'.

Comments

[toast-uz]

エラー表示をお願いします。

[toast-uz]

あとRoomのクラス定義が見たいです。

[toast-uz]

エラーは、return new Attributes.fromJson(res) のところで出ていますでしょうか？

[toast-uz]

追加していただいたコード、class Attributesが2回定義されています。Relationships、Includedの定義が無いです。

[aru889]

文字数制限にひっかかって削除していました。
ジェネレーター経由（最初に転載したURL）でmodel生成し、DataやAttributes等複数classとして生成されるものはData2 などで置換していました。
>エラーは、return new Attributes.fromJson(res) のところで出ていますでしょうか？

その通りです。

[toast-uz]

デコードしたJSONを、Attributesオブジェクトに変換する際の、fromJsonが子オブジェクトを繰り返し呼ぶところで、どこか型が一致しないところがあるようです。これ、dartでデバッグしにくいポイントでもあります。関係するオブジェクト全てのコードが必要です。表題に反しますが、homedartのコードは関係無いので削除していただき、Relationships、Includedの定義を掲載ください。あとclass Attributesは最新のものだけにしてください。

[toast-uz]

terateilの1つのコード挿入箇所に入りきらないのであれば、複数にわけてくたさい。

[toast-uz]

おそらく
return new Attributes.fromJson(res2);
にすると、今のエラーは出なくなるように思います。コードの意味として正しいかはわかりませんが。
json.decode(response.body)['data'][0]['attributes'] がAttributes型なので。

[toast-uz]

3つのidごとにAttributeを返して処理したいのなら、少し変える必要ありますが。とりあえす、上記でエラーが変われば、前に進みます。

[aru889]

>return new Attributes.fromJson(res2);
にすると、今のエラーは出なくなるように思います。コードの意味として正しいかはわかりませんが。

これで取得できました！ありがとうございます！

でも
>3つのidごとにAttributeを返して処理したいのなら、少し変える必要ありますが

こちらの通り、変更必要で。。
['data'][0]['attributes'] も['data'][0]['relationships']もその中のuserやcategory も全部取得したく。。

[toast-uz]

そうすると、
return Data.fromJson(res);
とする必要があると思います。ちなみにnewは不要です。再現できないため確証が無いので、しばらくこの欄で記述しますね。

[toast-uz]

dartのjson取り扱いは、コードが複雑だし、エラーが出た時の切り分けが困難なんですよねー。特に今回のjsonは構造が複雑なので尚更です。私も自分のアプリで散々苦労しました。

[aru889]

そうですよね……

final res = json.decode(response.body)['data'];

for (var i = 0; i < res.length; i++) {
var obj = Data.fromJson(res[i]).toJson();
print('obj' + obj.toString());
return obj;
}
でループさせると取ってこれると思ったんですが、初期値しか表示されずになっています><
値さえループできればクライアントで表示できるかも…（ListだからtoJsonしないといけないんですね…）

Answer 1

class WebServiceのif文のところを、以下のようにしてください。

質問者様と会話したところ、Jsonの'data'配下のリスト部分（=res）が全て必要とのことでした。それはオブジェクトDataのリストになっています。そのため、resのリスト構造をforで舐めて、1つ1つのリスト要素である子JsonをData型に変換し、そのData型を集めてリスト（=objList）に組み直す必要があります。それをコードで表しました。

難関であったJsonからオブジェクトへの変換は、これでうまくいくはずです。

できあがったobjListを、そのままreturnしてFutureBuilderに受け渡しています。後は必要に応じて、FutureBuilder側を調整してください。

例えば、Text(snapshot.data.title.toString())などは、Text(snapshot[0].data.title.toString())などと、snapshotにリストであるobjListが入ってくることを、意識した修正が必要になると思います。

    if (response.statusCode == 200) {
      final res = json.decode(response.body)['data'] as List;
      List<Data> objList = [];
      for (Map<String, dynamic> res_one in res) {
        objList.add(Data.fromJson(res_one));
      }
      return objList;
    }

Comments

[aru889]

いけましたー！！何度もありがとうございます！！！助かりました><