无法获取数据 API Flutter

Question

我想显示“invoices”中每个元素的数据，但我不知道为什么当我尝试调用“DataAllInvoice”类时会出现问题。

请帮我解决这个问题。

数据 API

{
    "invoices": [
        {
            "id": 3,
            "customer_id": 6,
            "customer_name": "Nguyễn Công Phượng",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-16T10:05:43",
            "total": 411107.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 4
        },
        {
            "id": 2,
            "customer_id": 3,
            "customer_name": "Nguyễn Văn A",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-14T10:05:43",
            "total": 411107.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 1
        },
        {
            "id": 1,
            "customer_id": 3,
            "customer_name": "Nguyễn Văn A",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-14T09:28:43",
            "total": 222220.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 5
        }
    ],
    "total": 3
}

调用 API 的类

 class GetInvoice{
     static int statusInvoice;
      createInvoice() async {
        final response = await http.get(
          Uri.parse("http://3.137.137.156:5000/api/rtm/v1/invoice/get-invoice?customer_id=0&pageNum=10&pageNo=1&from=%20&to=2021-05-14%2012%3A00%3A00"),
          headers: <String, String>{
            'Content-Type': 'application/json; charset=UTF-8',
            'Accept': 'application/json',
            'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIwMTIzNDU2Nzg4IiwiaWF0IjoxNjIyNjI0MjAyLCJleHAiOjE2MjMyMjkwMDJ9.zkf23Da4-TR5sVZgtXjXvczERhaNT1teeX5k-mQaKK6lbE0l28j5TwY5ZqPL252AEAaT8W1jyEUijG-rQiSu5Q',
          },

    );
    print("Status getApi Invoice:${response.statusCode}");

    statusInvoice = response.statusCode;

    if (response.statusCode == 200) {


      Invoice invoice = Invoice.fromJson(jsonDecode(response.body));
      List<DataAllInvoice> _invoice;
      for(int i=0;i < invoice.invoices.length;i++){
        if(invoice.invoices[i]!=null){
          Map<String,dynamic> map=invoice.invoices[i];
          _invoice.add(DataAllInvoice.fromJson(map)); ****Not working here****
        }
      }

      return _invoice;
    } else {
      // throw an exception.
      throw Exception('Failed to load data');
    }
  }

类在我尝试调用时出现问题 - DataAllInvoice 类

class DataAllInvoice {
  final int id, customer_id, creater_id, total, manager_confirm_id, status_id;
  final String customer_name, manager_confirm_name;
  final String creater_name, description;
  final DateTime create_time, manager_confirm_date, customer_confirm_date;

  DataAllInvoice(
      {this.id,
        this.customer_id,
        this.creater_id,
        this.total,
        this.manager_confirm_id,
        this.status_id,
        this.customer_name,
        this.manager_confirm_name,
        this.creater_name,
        this.description,
        this.create_time,
        this.manager_confirm_date,
        this.customer_confirm_date
      });

  factory DataAllInvoice.fromJson(Map<String, dynamic> json) {
    return DataAllInvoice(
      id: json[" id"],
      customer_id: json[" customer_id"],
      creater_id: json[" creater_id"],
      total: json[" total"],
      manager_confirm_id: json[" manager_confirm_id"],
      status_id: json[" status_id"],
      customer_name: json[" customer_name"],
      manager_confirm_name: json[" manager_confirm_name"],
      creater_name: json[" creater_name"],
      description: json[" description"],
      create_time: DateTime.parse(json[" create_time"]),
      manager_confirm_date: DateTime.parse(json[" manager_confirm_date"]),
      customer_confirm_date: DateTime.parse(json[" customer_confirm_date"]),
    );
  }

}

发票类

class Invoice {
  final List invoices;
  final int total;

  Invoice({this.invoices, this.total});

  factory Invoice.fromJson(Map<String, dynamic> json) {
    return Invoice(
      invoices: json["invoices"],
      total: json["total"],
    );
  }
}

================================================ ================================================== ========

Answer 1

试试看：

所以这里是Fetch Api 类

有时您需要使用Uri.parse() 将网址放入其中。

你必须检查statusCode是否等于200否则有问题。

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'DataCardFromApi.dart';

class FetchApi {
  static Future<List<Articles>> fetchStory() async {
    var url = Uri.parse("https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=c5609b49c9274e89bacde5dcab5c52a2");

    http.Response response = await http.get(url);

    if (response.statusCode == 200) {
      Map<String, dynamic> resMap = jsonDecode(response.body);

      List listNews = resMap['articles'];

      return listNews.map((e) => Articles.fromJson(e)).toList();
    }

    return null;
  }
}

所以第二步：

您必须复制Json 的所有代码并通过此Link 转换为Dart 代码

你会得到这样的代码：

class NewsModel {
  String status;
  int totalResults;
  List<Articles> articles;

  NewsModel({this.status, this.totalResults, this.articles});

  NewsModel.fromJson(Map<String, dynamic> json) {
    status = json['status'];
    totalResults = json['totalResults'];
    if (json['articles'] != null) {
      articles = new List<Articles>();
      json['articles'].forEach((v) {
        articles.add(new Articles.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['status'] = this.status;
    data['totalResults'] = this.totalResults;
    if (this.articles != null) {
      data['articles'] = this.articles.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Articles {
  Source source;
  String author;
  String title;
  String description;
  String url;
  String urlToImage;
  String publishedAt;
  String content;

  Articles(
      {this.source,
        this.author,
        this.title,
        this.description,
        this.url,
        this.urlToImage,
        this.publishedAt,
        this.content});

  Articles.fromJson(Map<String, dynamic> json) {
    source =
    json['source'] != null ? new Source.fromJson(json['source']) : null;
    author = json['author'];
    title = json['title'];
    description = json['description'];
    url = json['url'];
    urlToImage = json['urlToImage'];
    publishedAt = json['publishedAt'];
    content = json['content'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.source != null) {
      data['source'] = this.source.toJson();
    }
    data['author'] = this.author;
    data['title'] = this.title;
    data['description'] = this.description;
    data['url'] = this.url;
    data['urlToImage'] = this.urlToImage;
    data['publishedAt'] = this.publishedAt;
    data['content'] = this.content;
    return data;
  }
}

class Source {
  String id;
  String name;

  Source({this.id, this.name});

  Source.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}

第三步：

您必须像这样创建一个Function loadData，然后将其放入initState 中以获取数据

观看此代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/StoryModel.dart';
import 'Fetch_Api.dart';
import 'New_Page.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Articles> listModel;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadData() ;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
        actions: [
          Padding(padding: EdgeInsets.only(right: 20.0),child: Icon(Icons.search_rounded))],
        backgroundColor: Colors.indigo,
      ),
      body: SafeArea(child: listModel != null ?  ListView.builder(
          shrinkWrap: true,
          itemCount: listModel.length,
          itemBuilder: (_ , index){
            Articles model = listModel[index] ;
            if(model.urlToImage != null)
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  InkWell(
                      onTap:()=> onPressCallback(model),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(30.0),
                          child: Image.network(model.urlToImage,)),),
                  Text(model.title,style: TextStyle(fontSize: 27.0,fontWeight:FontWeight.bold),),
                  SizedBox(height: 20,),],
              ),
            ) ;

            return SizedBox();

          }) : Center(child: Text('Loading data ... ')),)

    );
  }

  void loadData() async{

   listModel = await FetchApi.fetchStory() ;

   setState(() {});

  }


  void onPressCallback(Articles model) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => NewPage(model: model)));

  }
}