如何在flutter中使用API​​调用嵌套的json数据？

Posted 2023-02-23

【中文标题】如何在flutter中使用API​​调用嵌套的json数据？

【英文标题】：How to call nested json data using API in flutter?

【发布时间】：2021-10-12 21:20:37

【问题描述】：

我的 JSON 如下所示：

Info: [
       
         c_type_id: "1",
         cleaning type: "A Cleaning"
        ,
        
          c_type_id: "2",
          cleaning type: "B Cleaning"
         ,
         
           c_type_id: "3",
           cleaning type: "C Cleaning"
         ,
         
           c_type_id: "4",
           cleaning type: "D Cleaning"
          ,
          
            c_type_id: "5",
            cleaning type: "E Cleaning"
           ,
       ]

这里是代码： 以下代码由this创建 第一课：

class Album 
   List<Info> info;
   Album(this.info)
     Album.fromJson(Map<String, dynamic> json) 
      if (json['Info'] != null) 
       info =  List<Info>.empty();
       json['Info'].forEach((v) 
       info.add(new Info.fromJson(v));
      );
     
    

   Map<String, dynamic> toJson() 
     final Map<String, dynamic> data = new Map<String, dynamic>();
      if (this.info != null) 
      data['Info'] = this.info.map((v) => v.toJson()).toList();
      
     return data;
     
    

第 2 类：

class Info 
  String cTypeId;
  String cleaningType;
  Info(this.cTypeId, this.cleaningType);
    Info.fromJson(Map<String, dynamic> json) 
    cTypeId = json['c_type_id'];
    cleaningType = json['cleaning type'];
    
   Map<String, dynamic> toJson() 
   final Map<String, dynamic> data = new Map<String, dynamic>();
   data['c_type_id'] = this.cTypeId;
   data['cleaning type'] = this.cleaningType;
   return data;
 

这是我执行代码时遇到的错误： 错误： 无法将参数类型“List”分配给参数类型“String”。

希望得到帮助！

【问题讨论】：

查看flutter.dev/docs/cookbook/networking/fetch-data

如果您从 API 获取数据，请参考我的回答 here 或 here

您提供的json 数据也不是有效的JSON。

@Ravindra S. Patil，我都试过了，但都没有输出。现在，此错误显示“错误：未为类型 'Album' 定义运算符'[]'”

你能告诉我你的 json 数据是在线托管的吗？因为我的第二个答案 json 数据和你的 json 数据看起来一样

【参考方案1】：

您正在尝试访问整个列表，只需使用您想要访问的snapshot.data.info[index].variableName 你会很高兴的

【参考方案2】：

你的目标是什么？你想在屏幕上显示什么？ 例如，您想显示一个包含所有清洁类型的列表吗？

您收到此错误是因为您的 Album 类中的属性 info 是一个列表：

class Album 
   List<Info> info;

如果你想显示列表中第一个信息的cleaningType，你可以这样做：

return Text(snapshot.data.info[0].cleaningType);

请记住，如果 info 列表为空，这将崩溃。

【讨论】：

如果我想显示所有列表数据怎么办？

【参考方案3】：

你应该试试下面的代码你的问题已经解决了 ->

声明您的 API 调用函数

Future<List<dynamic>> getInfoData() async 
    String url = 'https://fillmmaka.com/gigocleanapi/cleanintypes.php';
    var response = await http.get(Uri.parse(url), headers: 
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    );
    return json.decode(response.body)['Info'];
  

声明你的小部件

Center(
    child: FutureBuilder<List<dynamic>>(
      future: getInfoData(),
      builder: (context, snapshot) 
        if (snapshot.hasData) 
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) 
                var id = snapshot.data[index]['c_type_id'];
                var type = snapshot.data[index]['cleaning type'];

                return Card(
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      color: Colors.green.shade300,
                    ),
                    borderRadius: BorderRadius.circular(15.0),
                  ),
                  child: ListTile(
                    leading: Text(id),
                    title: Text(type),
                  ),
                );
              ,
            ),
          );
        
        return CircularProgressIndicator();
      ,
    ),
  ),

您的屏幕如下所示 ->