Home > Blockchain >  I want to show My Json Data in Listview in Flutter App
I want to show My Json Data in Listview in Flutter App

Time:09-17

I want to show all my json data in listview. but problem is, when i want to get idEmployee, officeID, avater and fullName in listview then it shows error.

type 'String' in not a subtype of type 'int'.

when i want to show only fullName using FutureBuilder. if i commented all variable without fullName in model class, it works fine. but when i want to add without fullName any other data, it shows error.

here is the json data what i want to show in listview

{
    "success": true,
    "data": {
        "count": 259,
        "data": [
            {
                "idEmployee": 3559,
                "avatar": "f8b8ad832a591db9c86a157a3739d98b.jpg",
                "fullName": "A X C",
                "officeID": "1003559",
                "email": "",
                "designation": "Account Manager",
                "department": "Accounts",
                "mobileNumber": "",
                "workStation": "Software Office",
                "businessUnit": "EMD"
            }
        ]
    },
    "id": 2899
}

Here is My Model Class

class ListAlbum {
  final int idEmployee;
  final String avatar;
  final String fullName;
  final int officeID;
  final String email;
  final String designation;
  final String department;
  final String mobileNumber;
  final String workStation;
  final String businessUnit;

  ListAlbum({
    required this.idEmployee,
    required this.avatar,
    required this.fullName,
    required this.officeID,
    required this.email,
    required this.designation,
    required this.department,
    required this.mobileNumber,
    required this.workStation,
    required this.businessUnit,
  });

  factory ListAlbum.fromJson(Map<String, dynamic> json) {
    return ListAlbum(
      idEmployee: json['idEmployee'],
      avatar: json['avatar'],
      fullName: json['fullName'],
      officeID: json['officeID'],
      email: json['email'],
      designation: json['designation'],
      department: json['department'],
      mobileNumber: json['mobileNumber'],
      workStation: json['workStation'],
      businessUnit: json['businessUnit'],
    );
  }
}

This is my full code

Now I want to create and add listview in Scaffold with data by solving these errors. can anyone give me the sample code or help to create this listview? Thanks in advance.

class OrganizationList extends StatefulWidget {
  const OrganizationList({Key? key}) : super(key: key);

  @override
  _OrganizationListState createState() => _OrganizationListState();
}

class _OrganizationListState extends State<OrganizationList> {
  late Future<ListAlbum> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = listData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<ListAlbum>(
          future: futureAlbum,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              print(snapshot.data);
              return Text(snapshot.data!.fullName);
              // return Text(snapshot.data!.officeID.toString());   // in this line error shows. type 'String' in not a subtype of type 'int'
            } else if (snapshot.hasError) {
              return Text('${snapshot.error}');
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Future<ListAlbum> listData() async {
  final token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjI4OTksImlzcyI6Imh0dHBzOi8vcG9ydGFsLWFwaS5qb21ha2hhdGEuY29tL2FwaS9hdXRoL2xvZ2luIiwiaWF0IjoxNjI5NTI2OTc1LCJleHAiOjE2Mjk2MTMzNzUsIm5iZiI6MTYyOTUyNjk3NSwianRpIjoiRktiT295eEYwaEpDUXMxdiJ9.o4eM_C4hlluHe9Azk0MspPJtYZ7agdpFA6xwKiijLj8';
  String url =
      'https://portal-api.jomakhata.com/api/getOrganizationData?token=${token}';

  Dio dio = new Dio();
  dio.options.headers['Content-Type'] = 'application/json';
  final body = {'limit': 10, 'orderBy': 'idEmployee', 'orderType': 'DESC'};
  final response = await dio.post(url, data: body);

  if (response.statusCode == 200) {
    print(response.statusCode);
    print(response.data);
    var data = ListAlbum.fromJson(response.data["data"]["data"][0]);
    return data;
  } else {
    throw Exception('Failed!');
  }
}

CodePudding user response:

Based on your json data, your officeID is a string "officeID": "1003559",

but in ListAlbum the attribute is defined as an integer final int officeID;

Change final int officeID; in ListAlbum to final String officeID;

And .toString() wont be required anymore.

Edit as per OP requested for more help:

Thank you. i understood. what was my problem. it was a silly mistake for me. can u please help me to create listview in Scaffold to show those data?

Future<List<ListAlbum>> listData() async {
  final token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjI4OTksImlzcyI6Imh0dHBzOi8vcG9ydGFsLWFwaS5qb21ha2hhdGEuY29tL2FwaS9hdXRoL2xvZ2luIiwiaWF0IjoxNjI5NTI2OTc1LCJleHAiOjE2Mjk2MTMzNzUsIm5iZiI6MTYyOTUyNjk3NSwianRpIjoiRktiT295eEYwaEpDUXMxdiJ9.o4eM_C4hlluHe9Azk0MspPJtYZ7agdpFA6xwKiijLj8';
  String url =
      'https://portal-api.jomakhata.com/api/getOrganizationData?token=${token}';

  Dio dio = new Dio();
  dio.options.headers['Content-Type'] = 'application/json';
  final body = {'limit': 10, 'orderBy': 'idEmployee', 'orderType': 'DESC'};
  final response = await dio.post(url, data: body);

  if (response.statusCode == 200) {
    print(response.statusCode);
    print(response.data);
    List<Map<String,dynamic>> data = response.data["data"]["data"];
    List<ListAlbum> albums = data.map((json) => ListAlbum.fromJson(json)).toList();

    
    return albums;
  } else {
    throw Exception('Failed!');
  }
}

proceed to then edit your FutureBuilder<ListAlbum> to FutureBuilder<List<ListAlbum>> and return a Listview.builder. More info on how to use Listview.builder https://flutter.dev/docs/cookbook/lists/long-lists

  • Related