JSONのパースについて

Question

dio + freezedを最近になって触り始めましたが解決方法が見つからず困っています
解決方法をご教示いただけないでしょうか？

実現したいこと

以下のようなJSONをパースして、下記の例にある[key1]や[key2]だけでなく
[subkey]の値にもアクセスしたいです

{
    "data": [
        {
            "key1": "data",
            "key2": "data",
            "key3": [
                {
                    "subkey11": "data",
                    "subkey12": "data",
                    "subkey13": "data"
                },
                {
                    "subkey21": "data",
                    "subkey22": "data",
                    "subkey23": "data"
                }
            ]
        },

        {
            "key1": "data",
            "key2": "data",
            "key3": [
                {
                    "subkey11": "data",
                    "subkey12": "data",
                    "subkey13": "data"
                },
                {
                    "subkey21": "data",
                    "subkey22": "data",
                    "subkey23": "data"
                }
            ]
        }
    ]
}

該当のソースコード

key「data」までは　「List<dynamic> data = map["data"];」と書く事でパース出来る事はわかりましたが
subkeyが文字列になってしまいます。

  Future<List<mdl>?> fetchList() async {
    const url = 'https://dummy.com/dummy';
    final response = await dio.get(
      url,
      options: Options(headers: {
        "Content-Type": "application/json",
      }),
    );

    if (response.statusCode == 200) {
      try {
        Map<String, dynamic> map = Map<String, dynamic>.from(response.data);
        List<dynamic> data = map["data"];
        final list = data.map((e) => mdl.fromJson(e)).toList();
        return list;
      } catch (e) {
        throw e;
      }
    } else {
      return null;
    }
  }
}

    return Scaffold(
      body: Center(
        child: asyncValue.when(
          data: (data) {
            return data.isNotEmpty
                ? ListView(
                    children: data.map((mdl mdl) {
                      return Card(
                          child: GestureDetector(
                              onTap: () {},
                              child: ListTile(
                                title: Text(mdl.key1.toString()),
                              )));
                    }).toList(),
                  )
                : const Text('データはありません');
          },
          loading: () => const CircularProgressIndicator(),
          error: (error, _) => Text(error.toString()),
        ),
      ),
    );

補足情報（FW/ツールのバージョンなど）

Flutter 3.3.9 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b8f7f1f986 (4 weeks ago) • 2022-11-23 06:43:51 +0900
Engine • revision 8f2221fbef
Tools • Dart 2.18.5 • DevTools 2.15.0

Comments

[ta.fu]

[subkey]にアクセスしたいとは？
Mapのキーに、"subkey11"とか"subkey12"を指定してJSONファイル書かれている"data"を取り出したいということですか。

次に「subkeyが文字列になってしまいます。」とは具体的にどう確認して文字列だったと判断したのでしょうか。

[退会済みユーザー]

>Mapのキーに、"subkey11"とか"subkey12"を指定してJSONファイル書かれている"data"を取り出したいということですか。
その通りです

>確認して文字列だったと判断したのでしょうか。
runtimetypeでデータ形式を見ています。

データの中身を確認しましたが下記のようになります
パースしていないので当然、JSONフォーマットを無視した1行の文字列になっています

{subkey11:data,subkey12:data,subkey13:data},{subkey21:data,subkey22:data,subkey23:data}

Answer 1

ta.fuさんへのレス続き
別に書きました通り、APIから取得するJSONのデータ個数は一定ではありません
ご指摘のやり方を踏襲しつつなんとか対応すると下記のようなイメージしか無さそうですが、
freezedを使う事でもう少しシンプルに書けないものかと思っての質問でした

    return Scaffold(
      appBar: AppBar(title: const Text('')),
      body: Center(
        child: asyncValue.when(
          data: (data) {
            return data.isNotEmpty
                ? ListView.builder(
                    itemCount: data.length,
                    itemBuilder: (context, index) {
                      var key3 = data[index].key3;

                      return DataTable(
                        headingRowHeight: 35,
                        headingRowColor: MaterialStateProperty.resolveWith((states) => Colors.black12),
                        columns: [
                          const DataColumn(label: Text("No")),
                          const DataColumn(label: Text("氏名")),
                          const DataColumn(label: Text("時間")),
                        ],
                        rows: List.generate(
                          　key3.length,
                          (count) => DataRow(
                            color: MaterialStateProperty.all(index.isEven ? Colors.grey : Colors.black12),
                            cells: [
                              DataCell(Text("${count + 1}")),
                              DataCell(Text(emp[count]["subkey1"])),
                              DataCell(Text("${output.format(DateTime.parse(key3[count]["subkey2"]))} 〜 ${output.format(DateTime.parse(key3[count]["subkey3"]))}")),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : const Text('Data is empty.');
          },

          loading: () => const CircularProgressIndicator(),
          error: (error, _) => Text(error.toString()),
        ),
      ),
    );
  }
}

※ちなみに、subkey11や subkey21は例として不適当でしたので読み替えをお願い致します
subkey11 → subkey1 / subkey12 → subkey2
subkey21 → subkey1 / subkey22 → subkey2

Answer 2

実現したいことに書かれている内容の答えであれば、response.data["data"][0]["key3"][0]["subkey11"]のように記述すればアクセスできるのだと思うけど。
dartのjsonエンコーダーは、[]内をListに、{}内をMapにして取り込んでるので、それを念頭に置いてアクセスすればデータを取り出せると思います。

ただコメントに対しての返答でruntimetypeが文字列(String)だと書かれているので、提示されていない情報に依存した問題があるのかもしれませんが。

以下のサンプルコードで試してます。
テスト用のローカルサーバーを立てて、該当するJSONデータを取得できるようにして、dioを使って読み込んだ結果を使用してます。

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:dio/dio.dart';

HttpServer? _server;

Encoding requiredEncodingForCharset(String charset) =>
    Encoding.getByName(charset) ??
    (throw FormatException('Unsupported encoding "$charset".'));

Uri get serverUrl => Uri.parse('http://localhost:${_server?.port}');

/// Starts a new HTTP server.
Future<void> startServer() async {
  _server = (await HttpServer.bind('localhost', 0))
    ..listen((request) async {
      var path = request.uri.path;
      var response = request.response;

      if (path == '/dummy') {
        response.headers.contentType = ContentType('application', 'json');
        response
          ..statusCode = 200
          ..contentLength = -1
          ..write('''
{
    "data": [
        {
            "key1": "data",
            "key2": "data",
            "key3": [
                {
                    "subkey11": "data",
                    "subkey12": "data",
                    "subkey13": "data"
                },
                {
                    "subkey21": "data",
                    "subkey22": "data",
                    "subkey23": "data"
                }
            ]
        },

        {
            "key1": "data",
            "key2": "data",
            "key3": [
                {
                    "subkey11": "data",
                    "subkey12": "data",
                    "subkey13": "data"
                },
                {
                    "subkey21": "data",
                    "subkey22": "data",
                    "subkey23": "data"
                }
            ]
        }
    ]
}
''');
        response.close();
        return;
      }
    });
}

/// Stops the current HTTP server.
void stopServer() {
  if (_server != null) {
    _server!.close();
    _server = null;
  }
}

void main(List<String> args) async {
  await startServer();

  final dio = Dio();
  dio.options.baseUrl = serverUrl.toString();
  final response = await dio.get(
    "/dummy",
    options: Options(headers: {
      "Content-Type": "application/json",
    }),
  );

  print(response.data["data"][0]["key3"][0]["subkey11"]);
  stopServer();
}

Comments

[退会済みユーザー]

コメントありがとうございます
ただ、APIから受け取るJSONは個数が一定ではありません

長くなりそうなので続きは別に書きます

Answer 3

以下のコードを、パースしたいJsonのモデルとなっているすべてのFreezedのClassの中に、記述すると出来ると思います。

  @JsonSerializable(anyMap: true)

それか、プロジェクトのルートディレクトリに”build.yaml”というファイルを作って以下の内容を記述してください

targets:
  $default:
    builders:
      json_serializable:
        options:
          any_map: true

Comments

[退会済みユーザー]

ありがとうございます
試してみます