如何在颤振应用程序中获取 JSON 数据？

Posted 2023-02-23

【中文标题】如何在颤振应用程序中获取 JSON 数据？

【英文标题】：How to fetch the JSON data in flutter application?

【发布时间】：2020-12-16 22:37:22

【问题描述】：

我有以下从服务器获取的 JSON 数据，我需要在 pageviewbuilder 以及 Flutter 应用程序中的 listview builder 中获取和配置这些数据。

Listview builder（垂直滚动）嵌套在Pageview builder（水平滚动）中，这个我已经配置了

要展示的东西是这样的

页面 ---------- 订购商品

订单 16 >> 订单 16，项目 1，订单 16 项目 2

订单 18 >> 订单 18，项目 1，订单 18，项目 2，订单 18 第 3 项

我是flutter学习JSON的新手，请指导我如何获取数据并根据需要用于上述配置。

    "error": "false",
    "content": [
        
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "16",
            "soh_pk": "23660",
            "order_items": [
                
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31689",
                ,
                
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31688",
                
            ]
        ,
        
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "18",
            "soh_pk": "23702",
            "order_items": [
                
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31749",
                ,
                
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31742",

                ,
                
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31743",
                ,
               
            ]
        
    ]

【参考方案1】：

从服务器获取 JSON：

添加 Http 包。 使用 Http 包发出网络请求。 将响应转换为列表 将此工作移至单独的隔离区。

更多信息请查看this链接

【参考方案2】：

您必须按照以下步骤自定义给定的代码：

1将此插件放入pubspec.yaml文件 http: ^0.12.0+4

2 将'package:http/http.dart' 导入为http； ///http我在下面使用你可以改变它

3构建一个获取数据的函数：

  Future<Map> getNews() async 
  String apiurl = "https://your url/";
  http.Response response = await http.get(apiurl);
  return json.decode(response.body);

4删除一个Map变量

Map data;

5 在异步方法中调用函数，例如：

// Future<void> main() async  you can call inside  initstate or any custom function 
 data = await getNews();

现在您的 json 数据在 data 内，您可以随意使用它。 6 在您的 listview.builder 中使用，如下所示

new Center(
        child: new ListView.builder(
            itemCount: data.length,
            padding: EdgeInsets.all(8.0),
            itemBuilder: (BuildContext context, int position) 
              return new ListTile(
//here posts and title are json variables that are in json file
                title: new Text("$data["posts"][position]["title"]"),
                subtitle: new Text(
                  parsehtmlString("$data["posts"][position]["content"]"),
                  maxLines: 18,
                ),
              );
            ),
      ),

【讨论】：

嘿 Qasim，我需要在哪里调用 data = await getNews();，因为我在其中调用了一个异步方法，并且在 initState() 中调用了该方法，我将 data 设为 null，请提供指导

你可以在主函数中调用它，它可以正常工作，并且还将地图数据声明为项目级别的全局变量。您可以在项目中随心所欲地使用“数据”。 @VickySingh

您可以通过在控制台上打印来检查“数据”。确保它为空或不是@VickySingh

我在main函数中调用，结果为null

在 main() 中调用它，然后使用 debugprint('$data');在下一行检查，输出是什么？