如何在 Flutter 的 ListView Builder 中解析嵌套的 json 数组响应数据

Question

我正在尝试解析 json 响应数据，在此响应中有嵌套数组列表，我想显示 table_id : 39 并在下一行或 table_id : 39 下显示 table_id : 40。现在的问题是当它在table_id : 39 上完成时，它应该转到table_id : 40 并显示，但它显示0floor 是null。谁能帮我在哪一步做错了。

JSON 响应

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

型号

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;
  }
}

home.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

试试这个.. 创建一个楼层类并使用关键参数解析楼层。

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"}
      ]
    }
  ]
};