如何在 Flutter 的 ListView Builder 中解析嵌套的 json 數組響應數據

Question

我正在嘗試解析 json 響應數據，在此響應中有嵌套數組列表，我想顯示table_id: 39並在下一行或下table_id: 39我想顯示table_id: 40 。 現在的問題是當它在table_id: 39上完成時，它應該 go 到table_id: 40並顯示，但它顯示0floor是null 。 誰能幫助我在哪一步我做錯了。

JSON 響應

{
    "message": "floors returned",
    "floorData": [
        {
            "0floor": [
                {
                    "table_id": "39"
                }
            ]
        },
        {
            "1floor": [
                {
                    "table_id": "40"
                }
            ]
        }
    ]
}

Model

class TablesFloorData0floor {

  String? tableId;

  TablesFloorData0floor({
    this.tableId,
  });
  TablesFloorData0floor.fromJson(Map<String, dynamic> json) {
    tableId = json['table_id']?.toString();
  }
  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    data['table_id'] = tableId;
    return data;
  }
}

class TablesFloorData {

  List<TablesFloorData0floor?>? the0floor;

  TablesFloorData({
    this.the0floor,
  });
  TablesFloorData.fromJson(Map<String, dynamic> json) {
    if (json['0floor'] != null) {
      final v = json['0floor'];
      final arr0 = <TablesFloorData0floor>[];
      v.forEach((v) {
        arr0.add(TablesFloorData0floor.fromJson(v));
      });
      the0floor = arr0;
    }
  }
  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    if (the0floor != null) {
      final v = the0floor;
      final arr0 = [];
      v!.forEach((v) {
        arr0.add(v!.toJson());
      });
      data['0floor'] = arr0;
    }
    return data;
  }
}

class Tables {
  String? message;
  List<TablesFloorData?>? floorData;

  Tables({
    this.message,
    this.floorData,
  });
  Tables.fromJson(Map<String, dynamic> json) {
    message = json['message']?.toString();
    if (json['floorData'] != null) {
      final v = json['floorData'];
      final arr0 = <TablesFloorData>[];
      v.forEach((v) {
        arr0.add(TablesFloorData.fromJson(v));
      });
      floorData = arr0;
    }
  }
  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    data['message'] = message;
    if (floorData != null) {
      final v = floorData;
      final arr0 = [];
      v!.forEach((v) {
        arr0.add(v!.toJson());
      });
      data['floorData'] = arr0;
    }
    return data;
  }
}

主頁.dart

  Widget showTable(
      List<TablesFloorData> data, StateSetter setStateBT, String lang) {
    return Container(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: data.length,
            itemBuilder: (BuildContext context, int index) {
              return Column(
                children: [
                  Text('test'),
                  ListView.builder(
                      shrinkWrap: true,
                      itemCount: data[index].the0floor!.length,
                      itemBuilder: (BuildContext context, int ind) {
                        return Text(data[index].the0floor![index]!.tableId!);
                      })
                ],
              );
            }));
  }

Answer 1

試試這個.. 創建一層 class 並使用關鍵參數解析樓層。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var data = (json['floorData'] as List<Map<String, dynamic>>)
        .map((f) => TablesFloorData.fromJson(f))
        .toList();
    return Scaffold(
      body: Center(
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                Text('test'),
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: data[index].tables.length,
                    itemBuilder: (BuildContext context, int ind) {
                      return Text(
                        data[index].tables[ind].id,
                        textAlign: TextAlign.center,
                      );
                    })
              ],
            );
          },
        ),
      ),
    );
  }
}

class TablesFloorData {
  final List<TableDate> tables;
  final int floor;

  TablesFloorData({
    required this.floor,
    required this.tables,
  });
  factory TablesFloorData.fromJson(Map<String, dynamic> json) =>
      TablesFloorData(
          floor: int.parse(json.keys.first.replaceAll('floor', '')),
          tables: json.values.first.map<TableDate>((tableJson) {
            return TableDate.fromJson(tableJson);
          }).toList());

  Map<String, dynamic> toJson() {
    return {'${floor}floor': tables.map((t) => t.toJson())};
  }
}

class TableDate {
  String id;

  TableDate({
    required this.id,
  });

  factory TableDate.fromJson(Map<String, dynamic> json) => TableDate(
        id: json['table_id'] as String,
      );

  Map<String, dynamic> toJson() {
    return <String, dynamic>{
      'table_id': id,
    };
  }
}

var json = {
  "message": "floors returned",
  "floorData": [
    {
      "0floor": [
        {"table_id": "39"}
      ]
    },
    {
      "1floor": [
        {"table_id": "40"}
      ]
    }
  ]
};