I'm getting a response from the server with a large nesting, and I can't display the second nesting with dynamic elements. For example, like this - Text('Child header name - ${catalogDrawer[index].one[index].name}'), won't work however, if the index is replaced by a number from 0 to 1, then there will be no error - Text('Child header name - ${catalogDrawer[index].one[0].name}'), Also, I can easily display first level data - Text('Header name - ${catalogDrawer[index].name}'), But, everything that goes lower in nesting is a disaster. What do i do?

Here is the response from the server -

"categories": [
        {
            "name": "Dlya nego",
            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/",
            "children": [
                {
                    "name": "obyv",
                    "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/obuv/",
                    "children": [
                        {
                            "name": "Krossovki",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/obuv/krossovki/",
                            "children": []
                        },
                        {
                            "name": "slancy",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/obuv/slancy/",
                            "children": []
                        }
                    ]
                },
                {
                    "name": "Kurtki",
                    "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/Kurtki/",
                    "children": [
                        {
                            "name": "bombery",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nego/Kurtki/bombery/",
                            "children": []
                        }
                    ]
                }
            ]
        },
        {
            "name": "dlya nee",
            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nee/",
            "children": [
                {
                    "name": "obyv",
                    "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nee/obuv/",
                    "children": [
                        {
                            "name": "Krossovki",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/dlya-nee/obuv/krossovki/",
                            "children": []
                        }
                    ]
                }
            ]
        },
        {
            "name": "deti",
            "url": "https://dev.radiwear.com/api/v1/m/catalog/deti/",
            "children": [
                {
                    "name": "obuv",
                    "url": "https://dev.radiwear.com/api/v1/m/catalog/deti/obuv/",
                    "children": [
                        {
                            "name": "krossovki",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/deti/obuv/krossovki/",
                            "children": []
                        }
                    ]
                }
            ]
        },
        {
            "name": "Sale",
            "url": "https://dev.radiwear.com/api/v1/m/catalog/sale/",
            "children": [
                {
                    "name": "obuv",
                    "url": "https://dev.radiwear.com/api/v1/m/catalog/sale/obuv/",
                    "children": [
                        {
                            "name": "Krossovki",
                            "url": "https://dev.radiwear.com/api/v1/m/catalog/sale/obuv/krossovki/",
                            "children": []
                        }
                    ]
                }
            ]
        }
    ],

Here is my entity -

class CatalogDrawerEntity extends Equatable {
  final String name;
  final String url;
  final List<OneChildren> one;
  const CatalogDrawerEntity ({
    required this.name,
    required this.url,
    required this.one
});
  @override
  // TODO: implement props
  List<Object?> get props => [name, url, one];
}

class OneChildren {
 final String name;
 final String url;
 final List<TwoChildren> two;

 const OneChildren({
   required this.name,
   required this.url,
   required this.two
});
}

class TwoChildren {
  final String name;
  final String url;
  TwoChildren({
    required this.name,
    required this.url
});
}

Here is my model -

class CatalogDrawerModel extends CatalogDrawerEntity {
  const CatalogDrawerModel({
    required name,
    required url,
    required one
}) : super (
    name: name,
    url: url,
    one: one
  );

  factory CatalogDrawerModel.fromJson(Map<String, dynamic> json) {
    return CatalogDrawerModel(
        name: json['name'],
        url: json['url'],
        one: json['children'] != null
        ? (json['children'] as List<dynamic>).map((json) => OneModel.fromJson(json)).toList()
            : null
    );
  }
  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'url': url,
      'children': one
    };
  }
}

And

class OneModel extends OneChildren{
  OneModel({name, url, two}) : super (name: name, url: url, two: two);

  factory OneModel.fromJson(Map<String, dynamic> json) {
    return OneModel(
      name: json['name'],
      url: json['url'],
      two: json['children'] != null
        ? (json['children'] as List<dynamic>).map((json) => TwoModel.fromJson(json)).toList()
          : null
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'url': url,
      'two': two
    };
  }
}

class TwoModel extends TwoChildren{
  TwoModel({name, url}) : super (name: name, url: url);

  factory TwoModel.fromJson(Map<String, dynamic> json) {
    return TwoModel(
      name: json['name'],
      url: json['url']
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'url': url
    };
  }
}

Here is the processing of data from the server -

Future<List<CatalogDrawerModel>> getAllCatalogDrawer() async {
    final response = await client.get(
      Uri.parse(ConfigUrl.home),
        headers: {'Content-Type': 'applications/json'}
    );
    if(response.statusCode == 200) {
      List catalogDrawer = json.decode(response.body)['categories'];
      return catalogDrawer.map((data) => CatalogDrawerModel.fromJson(data)).toList();
      // final catalogDrawer= json.decode(response.body);
      // print('Данные для карточек - $catalogDrawer');
      // return (catalogDrawer['categories'] as List).map((e) => CatalogDrawerModel.fromJson(e)).toList();
    } else {
      throw ServerException();
    }
  }

CodePudding user response：

The way you are parsing it is correct but the way you are showing it is wrong, you can't use same index of catalogDrawer for one, try this:

ListView.builder(
          itemBuilder: (context, index) {
            var one = catalogDrawer[index].one;
            return ListView.builder(
              itemBuilder: (context, i) {
                var two = one[i].two;

                return ListView.builder(
                  itemBuilder: (context, ii) {
                    return Text('Child header name -  ${two[ii].name}');
                  },
                  itemCount: two.length,
                  shrinkWrap: true,
                );
              },
              itemCount: one.length,
              shrinkWrap: true,
            );
          },
          itemCount: checkboxes.length,
        )