rest - 我正在尝试构建一个应用程序以使用 HTTP GET 在线获取数据，但它返回一个空列表

Question

我正在尝试使用 HTTP Get Request 加载 json 数据，但它没有显示任何内容，甚至没有显示列表。这是我第一次使用 API，我不是很了解它是如何工作的，请给我一些说明来理解和使用它。我只是按照这个教程https://www.youtube.com/watch?v=aIJU68Phi1w

我的主页.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String url = "http://127.0.0.1:8000/api/membres";
  List data;

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    var response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    print(response.body);

    setState(() {
      var convertDataToJson = json.decode(response.body);
      data = convertDataToJson['results'];
    });
    return "Success";
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text('Membres'),
        ),
        body: new ListView.builder(
            itemCount: data == null ? 0 : data.length,
            padding: const EdgeInsets.all(4.0),
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                child: new Center(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      new Card(
                        child: new Container(
                          child: new Text(data[index]['nom']),
                          padding: const EdgeInsets.all(20.0),
                        ),
                      )
                    ],
                  ),
                ),
              );
            }));
  }
}

这是我的 JSON

Answer 1

我觉得你在 JSON 解析时犯了错误!

在您的代码中您有 data = convertDataToJson['results']; 但在您的 JSON 中，没有 results 这样的东西。

改用 data = convertDataToJson['membre'];。

完整代码应该是

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String url = "http://127.0.0.1:8000/api/membres";
  List data;

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    var response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    print(response.body);

    setState(() {
      var convertDataToJson = json.decode(response.body);
      data = convertDataToJson['results'];
    });
    return "Success";
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text('Membres'),
        ),
        body: new ListView.builder(
            itemCount: data == null ? 0 : data.length,
            padding: const EdgeInsets.all(4.0),
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                child: new Center(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      new Card(
                        child: new Container(
                          child: new Text(data[index]['nom']),
                          padding: const EdgeInsets.all(20.0),
                        ),
                      )
                    ],
                  ),
                ),
              );
            }));
  }
}