Type error when parsing JSON data into Flutter model objects

I'm working on a Flutter project where I need to parse JSON data into model objects. The JSON structure includes nested objects and arrays. I have three model classes: UserModel, AbilityModel, and SkillModel.

The UserModel class has a list of AbilityModel objects, and each AbilityModel object has a list of SkillModel objects.

When I try to deserialize the JSON data into the model objects, I encounter the following error:

type 'List<dynamic>' is not a subtype of type 'Iterable<Map<String, dynamic>>'

I suspect the issue is related to the JSON structure of the "ability" field, which is an array of objects. However, I'm not sure how to properly handle it in my code.

Here's a simplified version of my model classes:

// UserModel
class UserModel {
  int id;
  String name;
  List<AbilityModel> abilities;

  UserModel({required this.id, required this.name, required this.abilities});

  UserModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    abilities = (json['ability'] as List<dynamic>)
        .map((ability) => AbilityModel.fromJson(ability))
        .toList();
  }
}

// AbilityModel
class AbilityModel {
  int id;
  List<SkillModel> skills;

  AbilityModel({required this.id, required this.skills});

  AbilityModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    skills = (json['skills'] as List<dynamic>)
        .map((skill) => SkillModel.fromJson(skill))
        .toList();
  }
}

// SkillModel
class SkillModel {
  int id;
  String name;

  SkillModel({required this.id, required this.name});

  SkillModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }
}

And here's the user repository:

class UserRepository {
  Future<List<UserModel>> getUsers() async {
    final response = await http.get(Uri.parse('https://example.com/users'));

    if (response.statusCode == 200) {
      var data = jsonDecode(response.body)['data'];
      List<UserModel> users = [];
      for (var userData in data) {
        UserModel user = UserModel.fromJson(userData);
        users.add(user);
      }
      return users;
    } else {
      throw Exception('Failed to load users');
    }
  }
}

And here's an example of the JSON data I'm trying to parse:

{
  "data": {
    "users": [
      {
        "id": 1,
        "name": "John Doe",
        "ability": [
          {
            "id": 1,
            "skills": [
                "id": 1,
                "name": "Skill1"
            ]
          },
          {
            "id": 2,
            "skills": [
                "id": 2,
                "name": "Skill2"
            ]
          }
        ]
      },
      {
        "id": 2,
        "name": "Jane Smith",
        "ability": [
          {
            "id": 3,
            "skills": [
                "id": 3,
                "name": "Skill3"
            ]
          },
          {
            "id": 4,
            "skills": [
                "id": 4,
                "name": "Skill4"
            ]
          }
        ]
      }
    ]
  }
}

I would greatly appreciate any guidance on how to properly deserialize the JSON data into the model objects and resolve this type error. Thank you in advance for your help!

Your json code format is wrong

{
"data": {
"users": [
{
"id": 1,
"name": "John Doe",
"ability": [
{
"id": 1,
"skills": {
"id": 1,
"name": "Skill1"
}
},
{
"id": 2,
"skills": {
"id": 2,
"name": "Skill2"
}
}
]
},
{
"id": 2,
"name": "Jane Smith",
"ability": [
{
"id": 3,
"skills": {
"id": 3,
"name": "Skill3"
}
},
{
"id": 4,
"skills": {
"id": 4,
"name": "Skill4"
}
}
]
}
]
}
}

Dart model

class Random {
Data? data;
Random({this.data});
Random.fromJson(Map<String, dynamic> json) {
data = json['data'] != null ? new Data.fromJson(json['data']) : null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.data != null) {
data['data'] = this.data!.toJson();
}
return data;
}
}
class Data {
List<Users>? users;
Data({this.users});
Data.fromJson(Map<String, dynamic> json) {
if (json['users'] != null) {
users = <Users>[];
json['users'].forEach((v) {
users!.add(new Users.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.users != null) {
data['users'] = this.users!.map((v) => v.toJson()).toList();
}
return data;
}
}
class Users {
int? id;
String? name;
List<Ability>? ability;
Users({this.id, this.name, this.ability});
Users.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['name'];
if (json['ability'] != null) {
ability = <Ability>[];
json['ability'].forEach((v) {
ability!.add(new Ability.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
if (this.ability != null) {
data['ability'] = this.ability!.map((v) => v.toJson()).toList();
}
return data;
}
}
class Ability {
int? id;
Skills? skills;
Ability({this.id, this.skills});
Ability.fromJson(Map<String, dynamic> json) {
id = json['id'];
skills =
json['skills'] != null ? new Skills.fromJson(json['skills']) : null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
if (this.skills != null) {
data['skills'] = this.skills!.toJson();
}
return data;
}
}
class Skills {
int? id;
String? name;
Skills({this.id, this.name});
Skills.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['name'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
return data;
}
}