flutter - 如何将地图 JSON 列表获取到 DropdownMenuItem?
问题描述
我在这里有一个 JSON 对象:
{
"error": "0",
"message": "Succesfully fetched",
"data": [
{
"status": true,
"_id": "5df0b94841f0331baf1357bb",
"name": "test group",
"description": "test description",
"created_date": "2019-12-11T09:39:20.151Z",
"__v": 0
},
{
"status": true,
"_id": "5df0df507091683d2f1ad0cf",
"name": "new group",
"created_date": "2019-12-11T12:21:36.283Z",
"__v": 0
}
]
}
我想将 data 下的 name 参数提取到DropDownMenuList
. 我在这里有一个数据模型:
class dataArray {
// final dynamic status;
final dynamic id;
final dynamic groupName;
// final dynamic description;
// final dynamic created_date;
// final dynamic v;
dataArray(this.groupName, this.id);
dataArray.fromJson(Map jsonMap)
: groupName = jsonMap['name'],
id = jsonMap['_id'];
Map toMapData(){
var mapGroup = new Map<String, dynamic>();
mapGroup["name"] = groupName;
mapGroup['_id'] = id;
return mapGroup;
}
}
获取函数:
Future<List<dataArray>> gettaskData() async {
List<dataArray> list;
String link = ""; //Cannot provide this due to confidentiality
var res = await http
.get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
print(res.body);
if (res.statusCode == 200) {
var data = json.decode(res.body);
var rest = data["data"] as List;
var error = data['error'];
print("this is error = $error");
print(rest);
list = rest.map<dataArray>((json) => dataArray.fromJson(json)).toList();
}
print("List Size: ${list.length}");
return list;
}
此方法成功地将项目提取到ListView.builder
小部件中,但我对如何将其提取到List<DropdownMenuItem<T>> items
.
我试图通过这些解决方案:
第一个链接似乎是获取一个列表而不是一个地图,第二个链接显示一个地图,而在我的 JSON 列表中,我必须显示地图列表中的一个值。
编辑:根据接受的答案,我也将initJson
方法修改为 -
Future initJson() async {
_list = await loadJsonFromAsset();
//print("Printing _List = ${_list[0].groupName}");
// if (_list.length > 0) {
setState(() {
for(int i =0; i<=_list.length - 1; i++) {
_selectedMenuItem = _list[i];
}
});
// }
}
这显示了 api 中存在的每个对象的名称参数。
解决方案
你可以像这样制作下拉菜单,
FutureBuilder<List<dataArray>>(
future: gettaskData(),
builder: (BuildContext, snapshot){
if (snapshot.data != null) {
//print('project snapshot data is: ${projectSnap.data}');
return Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.circular(3),
color: Colors.grey[300]),
child: DropdownButtonHideUnderline(
child: DropdownButton(
items: snapshot.data.map((value) {
return new DropdownMenuItem(
value: value.id,
child: new Text(
value.groupName,
),
);
}).toList(),
value: select_dataItem == "" ? null : select_dataItem,
onChanged: (v) {
FocusScope.of(context).requestFocus(new FocusNode());
setState(() {
select_dataItem = v;
print("selected ${select_dataItem}");
});
},
isExpanded: true,
hint: Text(
'Select Source',
),
),
),
);
}
if(snapshot.data == null){
return Text("No Data");
}
return Container();
},
),
推荐阅读
- java - Java:如何从实时麦克风输入中获取 FFT 波段
- delphi - 创建自己的组件时如何在设计时在结构视图面板中隐藏子组件(隐藏
) - javascript - 如何验证具有一个输入字段的角度 2 中的表单?
- javascript - 使用croppie在没有jquery的情况下裁剪图像
- ios - 以编程方式设置的约束导致内存泄漏?iOS 迅捷
- firebase - 本地环境与云环境的 package.json 中的不同入口点
- c++ - 价值转换与参考转换
- mariadb - 仅限服务器端的 Webhook
- node.js - NodeJS 将 rest API APP 表达成 Angular 5 项目
- python - 访问元组内的数据