AutoCompleteTextField not Showing json Data Flutter

Question

Here i am trying to show all collage name in textfield through json and i dont't know why it not showing me allcollagename List data is showing in my debug console but it is not visible in AutoCompleteTextField

here's the api which i am using to fetch data for collage names

var api = 'http://universities.hipolabs.com/search';

here's my fetch data function.

fetchData() async {
    try {
      var res = await http.get(api);
      var data = jsonDecode(res.body);
      List<CollageName> collageNameList = data.map<CollageName>((sup) {
        return CollageName.fromJson(sup);
      }).toList();

      allCollageList = collageNameList;
      return allCollageList;
    } catch (err) {
      return Future.error("Connection Error Restart App");
    }
  }

i am calling this fetch data function in initState and here's my code for AutoCompleteTextField

 Container(
            child: AutoCompleteTextField(
                key: key,
                controller: _suggetionTextFieldController,
                suggestions: allCollageList,
                clearOnSubmit: false,
                style: TextStyle(fontSize: 10),
                itemFilter: (item, query) {
                  return item.name
                      .toLowerCase()
                      .startsWith(query.toLowerCase());
                },
                itemSorter: (a, b) {
                  return a.name.compareTo(b.name);
                },
                itemSubmitted: (item) {
                  _suggetionTextFieldController.text = item.name;
                },
                itemBuilder: (context, item) {
                  return Container(
                    child: Text(item.name),
                  );
                })),

CollageName(model class)

class CollageName {
  String country;
  String stateProvince;
  String name;
  List<dynamic> webPages;
  List<dynamic> domains;
  String alphaTwoCode;

  CollageName(
      {this.country,
      this.stateProvince,
      this.name,
      this.webPages,
      this.domains,
      this.alphaTwoCode});

  CollageName.fromJson(Map<String, dynamic> json) {
    country = json['country'] ?? "ohh bhai tu fir aa gaya";
    stateProvince = json['state-province'];
    name = json['name'] ?? "ohh bhai tu fir aa gaya";
    webPages = json['web_pages'].cast<String>();
    domains = json['domains'].cast<String>();
    alphaTwoCode = json['alpha_two_code'] ?? "ohh Bhai";
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['country'] = this.country;
    data['state-province'] = this.stateProvince;
    data['name'] = this.name;
    data['web_pages'] = this.webPages;
    data['domains'] = this.domains;
    data['alpha_two_code'] = this.alphaTwoCode;
    return data;
  }
}

init State

 @override
  void initState() {
    super.initState();
    fetchData();
    print(allCollageList.toString());
  }

Answer 1

Make a few changes to your fetchData() method

fetchData() async {

    try {
      var res = await http.get(api);
      var data = jsonDecode(res.body);

      List<CollageName> collageNameList = data.map<CollageName>((sup) {
        return CollageName.fromJson(sup);
      }).toList();

      // added these 3 lines also, notice that I have used .addAll() method instead of using the assignment operator
      setState(() {
        allCollageList.addAll(collageNameList); 
      });

    } catch (err) {
      return Future.error("Connection Error Restart App: " + err);
    }
  }

Answer 2

I think you have missed to setState after setting the variable.

Try something like this,

fetchData() async {
    try {
      var res = await http.get(api);
      var data = jsonDecode(res.body);
      List<CollageName> collageNameList = data.map<CollageName>((sup) {
        return CollageName.fromJson(sup);
      }).toList();

    
     setState((){  allCollageList = collageNameList });
      
     
    } catch (err) {
      return Future.error("Connection Error Restart App");
    }
  }

and also in your fromJson implementation. It should return the instances.

factory CollageName.fromJson(Map<String, dynamic> json) {
    
    return CollageName(
      country : json['country'] ?? "ohh bhai tu fir aa gaya",
      stateProvince : json['state-province'],
      name : json['name'] ?? "ohh bhai tu fir aa gaya",
      webPages : json['web_pages'],
      domains : json['domains'],
      alphaTwoCode : json['alpha_two_code'] ?? "ohh Bhai"
    );
    
 }

Hope that works!