How to parse nested JSON Array in Flutter?

Question

I'm using json_model plugin for making PODO class. I've successfully parsed main Array. But I can't put "images" key that contains Array of Map in PODO class using that plugin and can't parsing the data.

Here is the Array that I want to parse.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    },
    "images": [
      {
        "id": 11,
        "imageName": "xCh-rhy"
      },
      {
        "id": 31,
        "imageName": "fjs-eun"
      },
      {
        "id": 51,
        "imageName": "asd-fdg"
      },
      {
        "id": 71,
        "imageName": "zxc-cvb"
      },
      {
        "id": 91,
        "imageName": "qwe-hgj"
      }
    ]
  },
    ...
]

Thanks!!!

Parsing json data here

Future<List<Users>> _fetchUser() async {
    final response =
        await DefaultAssetBundle.of(context).loadString('users.json');
    if (response != null) {
      List users = json.decode(response.toString());
      return users.map((user) => Users.fromJson(user)).toList();
    } else {
      throw Exception('Failed to load data!');
    }
  }

Trying to show "images" data...

FutureBuilder<List<Users>>(
          future: _fetchUser(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (snapshot.hasData) {
              List<Users> users = snapshot.data;

              return ListView.separated(
                itemCount: users.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text('${users[index].username}'),
                    subtitle: Text('${users[index].images[index].imageName}'),
                    onTap: () {
                      Navigator.pushNamed(context, DetailsScreen.route,
                          arguments: users[index]);
                    },
                  );
                },
                separatorBuilder: (BuildContext context, int index) =>
                    Divider(),
              );
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        )

But it's showing the error : Index out of range: index should be less than 5:5

Answer 1

This is simple object with it, i don't consider your array. it only inner object model. You can generate model by this : https://javiercbk.github.io/json_to_dart/

    class Autogenerated {
    int id;
    String name;
    String username;
    String email;
    Address address;
    String phone;
    String website;
    Company company;
    List<Images> images;

    Autogenerated(
        {this.id,
        this.name,
        this.username,
        this.email,
        this.address,
        this.phone,
        this.website,
        this.company,
        this.images});

    Autogenerated.fromJson(Map<String, dynamic> json) {
        id = json['id'];
        name = json['name'];
        username = json['username'];
        email = json['email'];
        address =
            json['address'] != null ? new Address.fromJson(json['address']) : null;
        phone = json['phone'];
        website = json['website'];
        company =
            json['company'] != null ? new Company.fromJson(json['company']) : null;
        if (json['images'] != null) {
        images = new List<Images>();
        json['images'].forEach((v) {
            images.add(new Images.fromJson(v));
        });
        }
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['id'] = this.id;
        data['name'] = this.name;
        data['username'] = this.username;
        data['email'] = this.email;
        if (this.address != null) {
        data['address'] = this.address.toJson();
        }
        data['phone'] = this.phone;
        data['website'] = this.website;
        if (this.company != null) {
        data['company'] = this.company.toJson();
        }
        if (this.images != null) {
        data['images'] = this.images.map((v) => v.toJson()).toList();
        }
        return data;
    }
    }

    class Address {
    String street;
    String suite;
    String city;
    String zipcode;
    Geo geo;

    Address({this.street, this.suite, this.city, this.zipcode, this.geo});

    Address.fromJson(Map<String, dynamic> json) {
        street = json['street'];
        suite = json['suite'];
        city = json['city'];
        zipcode = json['zipcode'];
        geo = json['geo'] != null ? new Geo.fromJson(json['geo']) : null;
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['street'] = this.street;
        data['suite'] = this.suite;
        data['city'] = this.city;
        data['zipcode'] = this.zipcode;
        if (this.geo != null) {
        data['geo'] = this.geo.toJson();
        }
        return data;
    }
    }

    class Geo {
    String lat;
    String lng;

    Geo({this.lat, this.lng});

    Geo.fromJson(Map<String, dynamic> json) {
        lat = json['lat'];
        lng = json['lng'];
    }

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

    class Company {
    String name;
    String catchPhrase;
    String bs;

    Company({this.name, this.catchPhrase, this.bs});

    Company.fromJson(Map<String, dynamic> json) {
        name = json['name'];
        catchPhrase = json['catchPhrase'];
        bs = json['bs'];
    }

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

    class Images {
    int id;
    String imageName;

    Images({this.id, this.imageName});

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

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

Answer 2

The suggested answer is OK, but some errors appear (even in the automatic converter, provided in the link). E.g.,

not OK:

Geo.fromJson(Map<String, dynamic> json) {
    lat = json['lat'];
    lng = json['lng'];
}

OK:

Geo.fromJson(Map<String, dynamic> json):
    lat = json['lat'],
    lng = json['lng'];