Question

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

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

请问有什么帮助吗？...................................... ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ......................

this is the body

ERROR

这是我的代码


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'];
      });
    });
  }
}

Answer 1

错误是因为数据的类型虽然是List，可以通过'int'索引访问，但是你可以像Map一样访问。

data['famille']

作为您的数据主体，data[0] 是“famille”，而 data[1] 是您想要的数据。

数据[1]是

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

Answer 2

如我所见，问题出在您的 JSON 响应中

famille 是第一个元素，数据列表是第二个元素

但是在您的代码中 familysList = data['famille'];

您假设 famille 是一个键，而数据列表是值，这是不正确的

所以答案就是其中之一

1 - 让你的分配像 familysList = data[0];

2- 将您的 json 更改为 {"famille" :[{"id":8654,"firstname":"some name"]"}

Answer 3

您可以在下面复制粘贴运行完整代码
第 1 步：data[0] 是 String famille，data[1] 是您想要的 List

familysList = data[1];

第 2 步：firsName 是您需要的拼写错误 firstName
第 3 步：DropdownMenuItem 需要 value 属性

items: familysList?.map((item) {             
          return DropdownMenuItem<String>(
            child: Text("${item["firstName"]}"),
            value: 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];
      });
    });*/
  }
}

新问题的完整代码 2

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'];
      });
    });*/
  }
}

我在下拉列表中显示 json 数据时出现问题 flutter

3 个答案: