Integrating a list from a private api to a ListView

I'm having issues with it for some reason, while running the app none of the cands (the list of objects) listed in the apis response gets displayed in the ListView. This is the response im getting from the api:

{
"currentPage": 1,
"totalPages": 1,
"totalResults": 4, // that's the amount of events in the list
"candList": [
{
"fname": "string", 
"lname": "string"
}
]
}

I guess the issue starts somewhere in that part of code:

final num = getJsonField(listViewGetCandListByManagerResponse.jsonBody, r'''$.candList''',).toList();
if (num.isEmpty) {
return Center(
child: SworkerContainerWidget(
fname: GetCandListByManagerCall.workerfname(listViewGetCandListByManagerResponse.jsonBody,).toString(),
lname: GetCandListByManagerCall.workerlname(listViewGetCandListByManagerResponse.jsonBody,).toString(),),);
}
return ListView.builder(
                              padding: EdgeInsets.zero,
                              scrollDirection: Axis.vertical,
                              itemCount: num.length,
                              itemBuilder: (context, numIndex) {
                                final numItem = num[numIndex];
                                return InkWell(
                                  onTap: () async {
                                    await Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                        builder: (context) =>
                                            HistoryPageWidget(),
                                      ),
                                    );
                                  },
                                  child: SworkerContainerWidget(
                                    desc: GetCandListByManagerCall
                                        .workereventDesc(
                                      listViewGetCandListByManagerResponse
                                          .jsonBody,
                                    ).toString(),
                                    fname: GetCandListByManagerCall.workerfname(
                                      listViewGetCandListByManagerResponse
                                          .jsonBody,
                                    ).toString(),
                                    lname: GetCandListByManagerCall.workerlname(
                                      listViewGetCandListByManagerResponse
                                          .jsonBody,
                                    ).toString(),
                                    dateEvent:
                                        GetCandListByManagerCall.dateEvent(
                                      listViewGetCandListByManagerResponse
                                          .jsonBody,
                                    ).toString(),
                                  ),
                                );
                              },
                            );

I might be wrong with that as well but let me know. The response I get while running the app:

dynamic getJsonField(dynamic response, String jsonPath) {
 final field = JsonPath(JsonPath).read(response);
 return field.isNotEmpty
  ? field.length > 1
     ? field.map((f) => f.value).toList() : field.first.value : null;
}

class GetCandListByManagerCall {
  static Future<ApiCallResponse> call({int? entityId}) {
     final body = {
             "token": "", //deleted in the post specifically
             "entityId": ${entityId},
             "pageNumber": 1,
             "rowsPerPage": 10,
             "search": ""
     };

     return Apimanager.instance.makeApicall(callName:'GetCandListByManager',....);
   } //the other parts in this line arent really helpful and have private info  

   static dynamic workerfname(dynamic response) => getJsonField(response, r'''$.fname''',);
   static dynamic workerlname(dynamic response) => getJsonField(response, r'''$.lname''',);
}

if there is any missing information to understand the problem more deeply tell me and i'll provide it.

Solution

First create class model like this:

class CandModel {
  final String firstName;
  final String lastName;

  const CandModel({
    required this.firstName,
    required this.lastName,
  });

  static CandModel fromJson(Map<String, dynamic> json) {
    
    return CandModel(
      firstName: json['fname'],
      lastName: json['lname'],
    );
  }
}

then pars your api like this, instead of this:

final num = getJsonField(listViewGetCandListByManagerResponse.jsonBody, r'''$.candList''',).toList();

use this:

final data = listViewGetCandListByManagerResponse.jsonBody['candList'] as List;
   List<CandModel> cands = data.map((e) => CandModel.fromJson(e)).toList();

then use it in you list view like this:

SworkerContainerWidget(
    desc: GetCandListByManagerCall.workereventDesc(
         listViewGetCandListByManagerResponse.jsonBody).toString(),
    fname: cands[index].firstName,
    lname: cands[index].lastName,,
    dateEvent:GetCandListByManagerCall.dateEvent(
          listViewGetCandListByManagerResponse.jsonBody).toString(),
)