How can I display the contents of nested list (contactArr list in the following json response) in JSON response in ListView in Flutter?

Question

{
"status": 200,
"message": "Data Found",
"data": {

I want to display this contactArr list in flutter ListView

    "contactArr": [{
        "contact": "17301807668",
        "name": "",
        "msg": "It's a test\r\n",
        "date": "2022-04-19 17:35:32",
        "log": "OUTGOING",
        "isRead": "1",
        "owner": "207",
        "ownerName": "Pranay  Piyush",
        "conversationId": "26705807938"
    }],
    "len": "10",
    "fltr": "",
    "isRead": 1,
    "provider": {
        "name": "nexmo",
        "sms": 1,
        "mms": 0,
        "whatsapp": 0,



        "default": "sms"
    }
}

} I wan to display the contents of the contactArr list from this JSON response in a ListView widget in Flutter

Answer 1

create contacts.dart and paste this code

class Contacts {
      int? status;
      String? message;
      Data? data;
    
      Contacts({this.status, this.message, this.data});
    
      Contacts.fromJson(Map<String, dynamic> json) {
        status = json['status'];
        message = json['message'];
        data = json['data'] != null ? new Data.fromJson(json['data']) : null;
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['status'] = this.status;
        data['message'] = this.message;
        if (this.data != null) {
          data['data'] = this.data!.toJson();
        }
        return data;
      }
    }
    
    class Data {
      List<ContactArr>? contactArr;
      String? len;
      String? fltr;
      int? isRead;
      Provider? provider;
    
      Data({this.contactArr, this.len, this.fltr, this.isRead, this.provider});
    
      Data.fromJson(Map<String, dynamic> json) {
        if (json['contactArr'] != null) {
          contactArr = <ContactArr>[];
          json['contactArr'].forEach((v) {
            contactArr!.add(new ContactArr.fromJson(v));
          });
        }
        len = json['len'];
        fltr = json['fltr'];
        isRead = json['isRead'];
        provider = json['provider'] != null
            ? new Provider.fromJson(json['provider'])
            : null;
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        if (this.contactArr != null) {
          data['contactArr'] = this.contactArr!.map((v) => v.toJson()).toList();
        }
        data['len'] = this.len;
        data['fltr'] = this.fltr;
        data['isRead'] = this.isRead;
        if (this.provider != null) {
          data['provider'] = this.provider!.toJson();
        }
        return data;
      }
    }
    
    class ContactArr {
      String? contact;
      String? name;
      String? msg;
      String? date;
      String? log;
      String? isRead;
      String? owner;
      String? ownerName;
      String? conversationId;
    
      ContactArr(
          {this.contact,
            this.name,
            this.msg,
            this.date,
            this.log,
            this.isRead,
            this.owner,
            this.ownerName,
            this.conversationId});
    
      ContactArr.fromJson(Map<String, dynamic> json) {
        contact = json['contact'];
        name = json['name'];
        msg = json['msg'];
        date = json['date'];
        log = json['log'];
        isRead = json['isRead'];
        owner = json['owner'];
        ownerName = json['ownerName'];
        conversationId = json['conversationId'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['contact'] = this.contact;
        data['name'] = this.name;
        data['msg'] = this.msg;
        data['date'] = this.date;
        data['log'] = this.log;
        data['isRead'] = this.isRead;
        data['owner'] = this.owner;
        data['ownerName'] = this.ownerName;
        data['conversationId'] = this.conversationId;
        return data;
      }
    }
    
    class Provider {
      String? name;
      int? sms;
      int? mms;
      int? whatsapp;
    
      Provider({this.name, this.sms, this.mms, this.whatsapp});
    
      Provider.fromJson(Map<String, dynamic> json) {
        name = json['name'];
        sms = json['sms'];
        mms = json['mms'];
        whatsapp = json['whatsapp'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['name'] = this.name;
        data['sms'] = this.sms;
        data['mms'] = this.mms;
        data['whatsapp'] = this.whatsapp;
        return data;
      }
    }

Create list and parse response

late List<ContactArr>? contactArr = [];

contactArr = Contacts.fromJson(jsonDecode(response)).data!.contactArr!;

return contactArr.length > 0
        ? ListView.builder(
        itemBuilder: (context, index) {
          return Text('${contactArr![index].ownerName!}'
              '\n${contactArr[index].contact!}');
        },
        itemCount: contactArr.length,
        shrinkWrap: true)
        : const Text('No data Found');

Enjoying coding!