Question

我正在尝试使用HTTP Get Request加载json数据，但它不会执行任何操作，甚至不会显示列表。这是我第一次使用API，但我并不真正了解它的工作原理，请给我一些说明，以了解和使用它。我只是按照本教程

MyHomePage.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 {{3}}

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),
                        ),
                      )
                    ],
                  ),
                ),
              );
            }));
  }
}

Answer 2

您确定变量数据中包含数据吗？尝试打印（数据）。您可以使用.map（）而不使用ListView。

body: new Container(
  child: new Center(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
        children: data.map((d) => 
          return new Card(
            child: new Container(
              child: new Text(d.nom),
                padding: const EdgeInsets.all(20.0),
              ),
            )
          ).toList();
        ),
      ),
    );

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

2 个答案: