How to properly fetch json object which contains array in flutter

I am trying the get City and Counter in Arrays from below json format.

{
"responseCode": 200,
"responseBody": {
    "success": [
        {
            "city": "C1",
            "counters": [
                "S1",
                "S2",
                "S3",
                "S4",
                "S5"
            ]
        },
        {
            "city": "C2",
            "counters": [
                "S6",
                "S7",
                "S8",
                "S9",
                "S10"
            ]
        }
    ]
}

}

I have written the code to get the json from API but not able to do so.

I have written below code to retrieve the json.

  Future<Map<String, dynamic>> fetchCityCounterDetail(int id) async {
  final url = 'myapi_url';

  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    print(data);
    print(data["responseBody"]["success"]);
    print(data["responseBody"]["success"]["city"]);

    return data;
  } else {
    throw Exception('Failed to fetch city counter detail');
  }
}

You have to create a Model class and then properly fetch the data.

Example Model:

class Model {
  String? city;
  List<String>? counters;

  Model({this.city, this.counters});

  Model.fromJson(Map<String, dynamic> json) {
    city = json['city'];
    counters = json['counters'].cast<String>();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['city'] = this.city;
    data['counters'] = this.counters;
    return data;
  }
}

And then your update your future function like:

Future<List<Model>> fetchCityCounterDetail() async {
  final url = 'myapi_url';
  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    final successData = data["success"];

    List<Model> models = [];
    for (var i = 0; i < successData.length; i++) {
      final city = successData[i]["city"];
      final counters = successData[i]["counters"].cast<String>();

      models.add(Model(city: city, counters: counters));
    }

    return models;
  } else {
    throw Exception('Failed to fetch city counter detail');
  }
}

And else where you can use it as:

final models = await fetchCityCounterDetail();
for (var i = 0; i < models.length; i++) {
  final model = models[i];
  print("City: ${model.city}");
  print("Counters: ${model.counters}");
}