flutter json object to to list for dropdown menu - json

Question

I got json object from API and i have to show this as a dropdown.
Json response
{
"deliveryCharges": {
"_id": "607b156404fb0a0184db98fe",
"businessId": "607b14ef04fb0a0184db98e3",
"createdAt": "2021-04-17T17:05:40.546Z",
"updatedAt": "2021-04-18T10:16:13.633Z",
"__v": 0,
"deliveryZones": {
"Bangladesh": { // country dropdown item 1
"Mirpur": {. // city dropdown item 1
"deliveryCost": "50",
"status": true
}
},
"American Samoa": { // country dropdown item 2
"lost city": { // city dropdown item 2
"deliveryCost": "50",
"status": true
}
}
}
}
}
Here Bangladesh and American Samoa in country drop down
Here Mirpur and lost city in city drop down
I thing i have to change json object to array. But did not found good example.
Advanced thanks

Answer 1

Since
"deliveryZones": {
"Bangladesh": { // country dropdown item 1
"Mirpur": {. // city dropdown item 1
"deliveryCost": "50",
"status": true
}
},
"American Samoa": { // country dropdown item 2
"lost city": { // city dropdown item 2
"deliveryCost": "50",
"status": true
}
}
}
this object will be stored in Map Data structure
you can convert map keys to list
map.keys.toList()

Answer 2

First, declare two variables of an array.
List<String> countryList = [];
List<String> zoneList = [];
After that parse JSON data which is provided from API response.
Map<String, dynamic> decoded = json.decode(response);
for (var colour in decoded.keys) {
List<String>.from(decoded[colour]['deliveryZones'].keys.map((model) {
countryList.add(model);
}));
List<String>.from(decoded[colour]['deliveryZones']['Bangladesh'].keys.map((model) {
zoneList.add(model);
}));
}
Now print and show the output
print("country $countryList");
print("zoneList $zoneList");

Answer 3

So I have Created a sample Example Based on the json that you provided.
json you provided :
{
"deliveryCharges": {
"_id": "607b156404fb0a0184db98fe",
"businessId": "607b14ef04fb0a0184db98e3",
"createdAt": "2021-04-17T17:05:40.546Z",
"updatedAt": "2021-04-18T10:16:13.633Z",
"__v": 0,
"deliveryZones": {
"Bangladesh": {
"Mirpur": {
"deliveryCost": "50",
"status": true
}
},
"American Samoa": {
"lost city": {
"deliveryCost": "50",
"status": true
}
}
}
}
}
Based on the json I have Made an Example :
import 'package:flutter/material.dart';
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var _isLoading = false;
String countryValue;
List<String> countriesList = [];
List<String> cityList = [];
String cityValue;
#override
void initState() {
super.initState();
getData();
}
getData() async {
setState(() {
_isLoading = true;
});
String data =
await DefaultAssetBundle.of(context).loadString("json/parse.json");
var item = json.decode(data);
item.forEach((key, value) {
print(value["deliveryZones"]);
value["deliveryZones"].forEach((key, value) {
print(key);
countriesList.add(key);
value.forEach((key, value) {
print(key);
cityList.add(key);
});
});
});
setState(() {
_isLoading = false;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Users List "),
),
body: Container(
width: 300,
child: _isLoading
? CircularProgressIndicator()
: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text(
'Choose Country'), // Not necessary for Option 1
value: countryValue,
onChanged: (newValue) {
setState(() {
countryValue = newValue;
});
print(countryValue);
},
items: countriesList.map((String company) {
return DropdownMenuItem(
child: new Text(company),
value: company,
);
}).toList(),
),
),
DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text('Choose City'), // Not necessary for Option 1
value: cityValue,
onChanged: (newValue) {
setState(() {
cityValue = newValue;
});
print(cityValue);
},
items: cityList.map((String company) {
return DropdownMenuItem(
child: new Text(company),
value: company,
);
}).toList(),
),
),
],
),
),
),
);
}
}
Let me know if it works.