我在下拉列表中显示json数据时遇到问题_Json_Flutter

我在下拉列表中显示json数据时遇到问题

json flutter

我在下拉列表中显示json数据时遇到问题,json,flutter,Json,Flutter,这是我的第一个FlatterJSON示例，我尝试从JSON链接获取数据并将其显示在下拉列表中我在控制台上得到响应，但下拉列表不起作用有什么帮助吗这是我的密码 import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This

这是我的第一个FlatterJSON示例，我尝试从JSON链接获取数据并将其显示在下拉列表中

我在控制台上得到响应，但下拉列表不起作用

有什么帮助吗

这是我的密码


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    _getfamilyList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 5),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: DropdownButtonHideUnderline(
                    child: ButtonTheme(
                      alignedDropdown: true,
                      child: DropdownButton<String>(
                        value: _myfamily,
                        iconSize: 30,
                        icon: (null),
                        style: TextStyle(
                          color: Colors.black54,
                          fontSize: 16,
                        ),
                        hint: Text('Select family'),
                        onChanged: (String newValue) {
                          setState(() {
                            _myfamily = newValue;

                            print(_myfamily);
                          });
                        },
                        items: familysList?.map((item) {
                              return new DropdownMenuItem(
                                child: new Text(item['firsName']),
                              );
                            })?.toList() ??
                            [],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
   

      
        ],
      ),
    );
  }


  List familysList;
  String _myfamily;
  String familyInfoUrl =
      'http://10.0.2.2:3000/genocheck/user/getmembrefamille/f1';
  Future<String> _getfamilyList() async {
    await http.get(familyInfoUrl).then((response) {
      var data = json.decode(response.body);

      print(data);
      setState(() {
        familysList = data['famille'];
      });
    });
  }
}


进口“包装：颤振/材料.省道”；
将“package:http/http.dart”导入为http；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
void initState（）{
_getfamilyList（）；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：专栏(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
容器(
填充：仅限边设置（左：15，右：15，顶部：5），
颜色：颜色，白色，
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
扩大(
子项：DropdownButtonHideUnderline(
孩子：ButtonTheme(
alignedDropdown：正确，
孩子：下拉按钮(
值：_myfamily，
iconSize:30，
图标：（空），
样式：TextStyle(
颜色：颜色。黑色54，
尺寸：16，
),
提示：文本（“选择族”），
onChanged:（字符串newValue）{
设置状态（）{
_myfamily=newValue；
打印（_myfamily）；
});
},
项目：家庭列表？.map（（项目）{
返回新的DropdownMenuItem(
子项：新文本（项['firsName']），
);
})？.toList（）？？
[],
),
),
),
),
],
),
),
],
),
);
}
家庭名单；
字符串(myfamily),；
弦家族=
'http://10.0.2.2:3000/genocheck/user/getmembrefamille/f1';
Future\u getfamilyList（）异步{
等待http.get（familyInfoUrl）。然后（（响应）{
var data=json.decode（response.body）；
打印（数据）；
设置状态（）{
familysList=数据['famille']；
});
});
}
}

导致此错误的原因是，尽管数据的类型是可以通过“int”索引访问的列表，但您可以像Map一样访问数据。

data['famille']

作为您的数据主体，数据[0]是“熟悉的”，数据[1]是您想要的数据

数据[1]为

[ 
    {
        "_id": "",
        "firstName": "",
    }
]

正如我看到的，问题在于您的JSON响应

家庭是第一要素，数据列表是第二个元素

但是在您的代码中

familysList=data['famille']
您假设Famile是一个键，数据列表是值，这是不正确的
所以答案就是其中之一
1-使您的asignment类似于familysList=data[0]
2-将您的json更改为{“famile”：[{“id”：8654，“firstname”：“some name”]“}
您可以复制粘贴并运行下面的完整代码

步骤1:数据[0]
是字符串家族
，数据[1]
是列表
您想要的

familysList = data[1];  

第二步：firsName
是您需要的打字错误firstName


第三步：DropdownMenuItem
needvalue
attribute

items: familysList?.map((item) {             
          return DropdownMenuItem<String>(
            child: Text("${item["firstName"]}"),
            value: item["firstName"],
          );
        })?.toList() ??

items:familysList？.map（（item）{
返回下拉菜单项(
子项：文本（${item[“firstName”]}），
值：项[“名字”]，
);
})？.toList（）？？

工作演示


完整代码
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    _getfamilyList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 5),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: DropdownButtonHideUnderline(
                    child: ButtonTheme(
                      alignedDropdown: true,
                      child: DropdownButton<String>(
                        value: _myfamily,
                        iconSize: 30,
                        icon: (null),
                        style: TextStyle(
                          color: Colors.black54,
                          fontSize: 16,
                        ),
                        hint: Text('Select family'),
                        onChanged: (String Value) {
                          setState(() {
                            _myfamily = Value;

                            print("_myfamily $_myfamily");
                          });
                        },
                        items: familysList?.map((item) {
                              //print(item["firstName"]);
                              return DropdownMenuItem<String>(
                                child: Text("${item["firstName"]}"),
                                value: item["firstName"],
                              );
                            })?.toList() ??
                            [],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  List familysList;
  String _myfamily;
  String familyInfoUrl =
      'http://10.0.2.2:3000/genocheck/user/getmembrefamille/f1';

  Future<String> _getfamilyList() async {
    String jsonString = '''
    [
  "famille",
  [
     {
       "_id" : "123",
       "firstName":"abc"
     },
     {
       "_id" : "456",
       "firstName":"def"
     }
  ] 
]
    ''';

    http.Response response = http.Response(jsonString, 200);
    var data = json.decode(response.body);
    print(data);

    setState(() {
      familysList = data[1];
    });

    /*await http.get(familyInfoUrl).then((response) {
      var data = json.decode(response.body);

      print(data);
      setState(() {
        familysList = data[1];
      });
    });*/
  }
}

导入“包装：颤振/材料.省道”；
导入“dart:convert”；
将“package:http/http.dart”导入为http；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
void initState（）{
_getfamilyList（）；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：专栏(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
容器(
填充：仅限边设置（左：15，右：15，顶部：5），
颜色：颜色，白色，
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
扩大(
子项：DropdownButtonHideUnderline(
孩子：ButtonTheme(
alignedDropdown：正确，
孩子：下拉按钮(
值：_myfamily，
我意识到：
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class UserElement {
  UserElement({
    this.id,
    this.firstName,
  });

  String id;
  String firstName;

  factory UserElement.fromJson(Map<String, dynamic> json) => UserElement(
        id: json["_id"] == null ? null : json["_id"],
        firstName: json["firstName"] == null ? null : json["firstName"],
      );

  Map<String, dynamic> toJson() => {
        "_id": id == null ? null : id,
        "firstName": firstName == null ? null : firstName,
      };
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    _getfamilyList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 15, right: 15, top: 5),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(
                  child: DropdownButtonHideUnderline(
                    child: ButtonTheme(
                      alignedDropdown: true,
                      child: DropdownButton<UserElement>(
                        value: _myfamily,
                        iconSize: 30,
                        icon: (null),
                        style: TextStyle(
                          color: Colors.black54,
                          fontSize: 16,
                        ),
                        hint: Text('Select family'),
                        onChanged: (UserElement Value) {
                          setState(() {
                            _myfamily = Value;

                            print("_myfamily ${_myfamily.firstName}");
                          });
                        },
                        items: familysList?.map((item) {
                              return DropdownMenuItem<UserElement>(
                                child: Text("${item.id} ${item.firstName}"),
                                value: item,
                              );
                            })?.toList() ??
                            [],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  List<UserElement> familysList = [];
  UserElement _myfamily;
  String familyInfoUrl =
      'http://10.0.2.2:3000/genocheck/user/getmembrefamille/f1';

  Future<String> _getfamilyList() async {
    String jsonString = '''
    [
  "famille",
  [
     {
       "_id" : "123",
       "firstName":"abc"
     },
     {
       "_id" : "456",
       "firstName":"abc"
     }
  ] 
]
    ''';

    http.Response response = http.Response(jsonString, 200);
    var data = json.decode(response.body);
    //print(data);

    setState(() {
      List<dynamic> listData = data[1];
      for (var i = 0; i < listData.length; i++) {
        familysList.add(UserElement.fromJson(listData[i]));
      }
    });

    /*await http.get(familyInfoUrl).then((response) {
      var data = json.decode(response.body);

      print(data);
      setState(() {
        familysList = data['famille'];
      });
    });*/
  }
}