fetch a list JSON to a DropdownMenuItem? - flutter

Question

I have a JSON object here:
{
"data": [
{
"id": 1,
"countryName": "India"
},
{
"id": 2,
"countryName": "USA"
}
],
"exceptionInfo": null,
"message": null,
"messages": null,
"isSuccess": true
}
I want to fetch the name parameter under data to a DropDownMenuList. I have a data model here:
import 'dart:convert';
GetCountry getCountryFromJson(String str) => GetCountry.fromJson(json.decode(str));
String getCountryToJson(GetCountry data) => json.encode(data.toJson());
class GetCountry {
GetCountry({
this.data,
this.exceptionInfo,
this.message,
this.messages,
this.isSuccess,
});
List<CountryModal> data;
dynamic exceptionInfo;
dynamic message;
dynamic messages;
bool isSuccess;
factory GetCountry.fromJson(Map<String, dynamic> json) => GetCountry(
data: List<CountryModal>.from(json["data"].map((x) => CountryModal.fromJson(x))),
exceptionInfo: json["exceptionInfo"],
message: json["message"],
messages: json["messages"],
isSuccess: json["isSuccess"],
);
Map<String, dynamic> toJson() => {
"data": List<dynamic>.from(data.map((x) => x.toJson())),
"exceptionInfo": exceptionInfo,
"message": message,
"messages": messages,
"isSuccess": isSuccess,
};
}
class CountryModal {
CountryModal({
this.id,
this.countryName,
});
int id;
String countryName;
factory CountryModal.fromJson(Map<String, dynamic> json) => CountryModal(
id: json["id"],
countryName: json["countryName"],
);
Map<String, dynamic> toJson() => {
"id": id,
"countryName": countryName,
};
}
The function to fetch the data is below and is the indifferent file:
Future<GetCountry> Getcountry(String authToken) async{
try {
String uriParts = apiEndPoint.getUriParts('location/GetCountries');
var response = await http.get(
apiEndPoint.getHTTPUri(uriParts),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': authToken
},
);
var responseJson = jsonDecode(response.body);
GetCountry country = GetCountry.fromJson(responseJson);
return country;
}
catch (err) {
debugPrint(err.toString());
throw err;
}
}
This method fetches the item successfully into a ListView.builder widget but I am a bit lost on how to fetch this to a List<DropdownMenuItem> items.
I have tried going through solutions but nothing seems to work for me.
please help.
EDIT:-
Below is the code for the dropdown list -:
List<CountryModal> _countrylist = [];
String mycountry;
DropdownButton(
items: _countrylist.map((item) {
return new DropdownMenuItem(
child: new Text(
item.countryName,
style: TextStyle(fontSize: 14.0),
),
value: item.id.toString(),
);
}).toList(),
hint: Text(
"Please select the country",
style: TextStyle(
color: Colors.black45,
),),
onChanged: (newVal) {
setState(() {
mycountry = newVal;
});
},
value: mycountry,
),
Error message below -:
Sample json format -:
{
"error": "0",
"message": "Succesfully fetched",
"status": true,
"data": [
{
"id": "5df0b94841f0331baf1357bb",
"stateName": "test group",
},
{
"id": "5df0df507091683d2f1ad0cf",
"stateName": "new group",
}
]
}

Answer 1

You will just pass a map.toList() to the items field.
DropdownButton(items: myGetCountry.map((CountryModal e) {
return DropdownMenuItem(child: SomeWidget(e))).toList();
})