Flutter 如何从 JSON 中列出具有多个子项的数组

Posted 2023-02-23

【中文标题】Flutter 如何从 JSON 中列出具有多个子项的数组

【英文标题】：Flutter How to List Array with multiple children from JSON

【发布时间】：2019-07-08 00:02:48

【问题描述】：

我很难从 json 中解析一个值。 我想创建一个带有扩展的 ListView Builder，并在扩展中有一个子级。 我的意思是像下面

Sample i want

但我不知道如何根据类型解析所有孩子。 有关详细的 sql 表和查询，请查看以下内容：

[

    "ID_Type": "1",
    "Type": "Food",
    "Item": [
        
            "SLU_Number": "3",
            "SLU_Name": "Food"
        
    ]
,

    "ID_Type": "2",
    "Type": "Beverages",
    "Item": [
        
            "SLU_Number": "1",
            "SLU_Name": "Non Alcohol"
        ,
        
            "SLU_Number": "2",
            "SLU_Name": "Alchohol"
        
    ]

]

我观看了一些视频并按照建议创建了一个新的 dart 文件，其中包含名为 ListType.dart 的新类

这里是代码

class Products 
  final ID_Type;
  final Name_Type;
  final Items;

  Products(
    this.ID_Type,
    this.Name_Type,
    this.Items,
  );

  factory Products.fromJson(Map<String, dynamic> json) 
    return Products(
      ID_Type: json["ID_Type"],
      Name_Type: json["Type"],
      Items: Item.fromJson(json["Item"]),
    );
  


class Item 
  final SLU_Number;
  final SLU_Name;

  Item(
    this.SLU_Number,
    this.SLU_Name,
  );

  factory Item.fromJson(Map<String, dynamic> json) 
    return Item(
      SLU_Number: json["SLU_Number"],
      SLU_Name: json["SLU_Name"],
    );
  

但是由于视频将值扔到列表中，所以我不知道将 json 值扔到 ListView.Builder。

下面是我通常如何扔给 List View Builder

//------------------------------Start Syntax for List SLU
  final listslu = new List<ListSLU>();
  final GlobalKey<RefreshIndicatorState> _refreshlistslu =
      GlobalKey<RefreshIndicatorState>();


  Future<void> ListSLUs() async 
    listslu.clear();
    setState(() 
      loading = true;
    );
    try 
      final response = await http.get(BaseUrl.ListSLU);
      if (response.contentLength == 2) 
       else 
        final data = jsonDecode(response.body);
        data.forEach((api) 
          final b = new ListSLU(
            api['ID_Type'].toString(),
            api['SLU_Number'].toString(),
            api['SLU_Name'].toString(),
          );
          listslu.add(b);
          print(api['SLU_Name'].toString());
        );
      
     catch (e) 
      print("Error List SLU :");
      print(e);
    
  
  //------------------------------End Syntax for List Type

下面我根据上面创建的未来异步将其扔到正文

Expanded(
              flex: 2,
              child: ListView.builder(
                itemCount: listslu.length,
                itemBuilder: (context,i)
                  final z = listslu[i];
                  return GestureDetector(
                    onTap: ()

                    ,
                    child: Container(
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                          Row(
                          children: <Widget>[
                          Text(z.SLU_Number +' - '+ z.SLU_Name),
                        ],
                      ),
                            ],
                          )
                        ],
                      ),
                    ),
                  );
                
              )
          ),

请多多指教。

【问题讨论】：

非常模糊的图片，可以将代码复制粘贴到 gist.github.com 或任何其他 pastebin - 比屏幕截图好得多。

请检查我的代码

【参考方案1】：

应该可以对item使用where()进行过滤，然后使用map()将每一行json转换成ListTile()

ExpansionTile(
   ...
   children: jsonData
      .where((row) => row["ID_Type"] == listtypes[i].ID_Type)
      .map((row) =>
         ListTile(
            title: Text(row["SLU_Name"])
         )
      )
)

【讨论】：

我已经编辑了我的帖子。你能帮帮我吗，我希望将 json 结果中的所有值都扔给 Listview.builder。

请帮我解决这个问题***.com/questions/60432234/…