Access up to the "model" key parameter in my listview builder for the provided json format in flutter

Viewed 53

I want to access up to the "model" key parameter in my listview builder for the provided json format in flutter but I don't know how can I access them

I want to access the child object model

What the json will look like:

  [
      {
        "vehicle": "roadways",
        "id": "10000",
        "category": {
          "500": {
            "id": "500",
            "name": "Bike",
            "icon": "http://example.com/bike.jpg",
            "model": [
              {
                "id": "510",
                "name": "Harley"
              },
              {
                "id": "520",
                "name": "Kawasaki"
              }
            ]
          },
          "50": {
            "id": "50",
            "name": "Car",
            "icon": "http://example.com/car.jpg",
          }
        },
      },
      {
        "vehicle": "waterways",
        "id": "20000",
        "category": {
          "600": {
            "id": "600",
            "name": "Ship",
            "icon": "http://example.com/ship.jpg",
            "model": [
              {
                "id": "610",
                "name": "model_1"
              },
              {
                "id": "520",
                "name": "model_2"
              }
            ]
          },
          "700": {
            "id": "700",
            "name": "model_3",
            "icon": "http://example.com/car.jpg",
          }
        },
      }
    ]
2 Answers
var data = jsonDecode("yourJosnString");

ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, i) {
          var data1 = data[i]["category"];
          String firstKey = data1.keys.first;
          var model = data1[firstKey];
          return Column(
            children: [
              for (i = 0; i < model.length; i++) ...[
                Text(
                  model["name"],
                )
              ]
            ],
          );
        },
      ),

you should first make an object for this json, like this:

class Vehicle {
  final String name;
  final VehicleCategory category;

  Vehicle({@required this.name, @required this.category});

  static List<Vehicle> fromJson(List _list) {
    List<Vehicle> result = [];

    for (var item in _list) {
      var address = Vehicle(
        name: item['id'] as String,
        category: VehicleCategory.fromJson(
            item['category']['500'] as Map<String, Object> ?? {}),
      );
      result.add(address);
    }
    return result;
  }
}

class VehicleCategory {
  final String name;
  final String icon;
  final List<VehicleModel> model;

  VehicleCategory(
      {@required this.name, @required this.icon, @required this.model});

  static VehicleCategory fromJson(Map<String, Object> _json) {
    return VehicleCategory(
        name: _json['name'] as String ?? '',
        icon: _json['icon'] as String ?? '',
        model:
            VehicleModel.fromJson(_json['model'] as List ?? []));
  }
}

class VehicleModel {
  final String name;
  final String id;

  VehicleModel({@required this.name, @required this.id});

  static List<VehicleModel> fromJson(List _list) {
    List<VehicleModel> result = [];

    for (var item in _list) {
      var address = VehicleModel(
        name: item['name'] as String,
        id: item['id'] as String,
      );
      result.add(address);
    }
    return result;
  }
}

then use it like this:

List<Vehicle> _list = Vehicle.fromJson(_myJson);
    return ListView.builder(
      itemCount: _list.length,
      itemBuilder: (context, i) {
        return Column(
          children: [
            ListView.builder(
              itemCount: _list[i].category.model.length,
              itemBuilder: (context, j) {
                return Text(_list[i].category.model[j].name);
              },
            )
          ],
        );
      },
    );
Related