Я пытаюсь создать приложение для извлечения данных в Интернете с помощью HTTP GET, но он возвращает список пустых

Question

Я пытаюсь загрузить данные json, используя HTTP Get Request, но он ничего не показывает и даже не отображает список.Это первый раз, когда я использую API, и я не совсем понимаю, как он работает, пожалуйста, дайте мне несколько инструкций, чтобы понять и работать с ним.Я просто следую этому уроку https://www.youtube.com/watch?v=aIJU68Phi1w

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

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();
        ),
      ),
    );