Question

我想从复杂的 json API 中获取数据并在 Flutter 未来构建器中显示数据。

这是 json 的示例

SELECT name,concat('$',CAST(Price AS VARCHAR(20))) FROM ...

这是从 API 中获取数据的函数

 {
    "hours": [
        {
            "time": "2021-03-23T00:00:00+00:00",
            "waveHeight": {
                "icon": 1.35,
                "meteo": 1.25,
                "noaa": 1.28,
                "sg": 1.25
            }
        },
{
            "time": "2021-03-23T00:00:00+00:00",
            "waveHeight": {
                "icon": 1.35,
                "meteo": 1.25,
                "noaa": 1.28,
                "sg": 1.25
            }
        },
    ],
}

控制台打印数据如下

Future getJsonData() async {
    String url2 =
        'https://api.stormglass.io/v2/weather/point?lat=5.9774&lng=80.4288&params=waveHeight&start=2021-03-23&end2021-03-24';
    
    String apiKey =
        '0242ac130002-248f8380-7a54-11eb-8302-0242ac130002';
    print('0');

    
    Response response = await get(Uri.parse(url2),
        headers: {HttpHeaders.authorizationHeader: apiKey});

   
    final _extractedData = json.decode(response.body) as Map<String, dynamic>;

    List<Wave> _data = [];
    List<Wave> _fetchedData = [];

    _extractedData['hours'].forEach((value) {
      _fetchedData.add(Wave(
        time: value['time'],
        icon: value['icon'],
        meteo: value['meteo'],
        noaa: value['noaa'],
        sg: value['sg'],
      ));
    });

    _data = _fetchedData;

    print(_data);

    return _data;
  }

下面是futurebuilder

/flutter ( 4879): [Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', Instance of 'Wave', In

当我运行应用程序时，显示以下错误

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("API"),
      ),
      body: Container(
        child: FutureBuilder(
            future: getJsonData(),
            builder: (context, AsyncSnapshot<dynamic> snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data[0]['time']);
              } else {
                return CircularProgressIndicator();
              }
            }),
      ),
    );
  }

以下是wave类

The following NoSuchMethodError was thrown building FutureBuilder<dynamic>(dirty, state: _FutureBuilderState<dynamic>#e19f8):
Class 'Wave' has no instance method '[]'.
Receiver: Instance of 'Wave'
Tried calling: []("time")

我想获取数据并将其打印在颤振列表视图中

Answer 1

这是因为您从 getJsonData 返回的数据不是地图，而是您创建的“WAVE”模型类。

基本上要访问您的“时间”，您需要更改代码：

return Text(snapshot.data[0]['time']);

到

return Text(snapshot.data[0].time);

使用 FutureBuilder 显示 API 数据

1 个答案: