从 php api 获取数据并填充颤振表

Posted 2023-02-23

【中文标题】从 php api 获取数据并填充颤振表

【英文标题】：get data from php api n popuate flutter table

【发布时间】：2022-01-01 17:01:05

【问题描述】：

我想将 api 中的数据插入到颤振表中..

为 API 数据创建的模型类

class Model 
  Model(
    this.id,
    this.goodsRef,
    this.loyer,
    this.bnCode,
    this.loyeeNo,
    this.contactName,
    this.contactTel,
    this.bnDesc,
    this.reqStatus,
    this.eMail,
    this.comments,
    this.tender,
    this.reqDate,
    this.sscOffice,
  );

  final String id;
  final int goodsRef;
  final String loyer;
  final String bnCode;
  final int loyeeNo;
  final dynamic contactName;
  final dynamic contactTel;
  final String bnDesc;
  final String reqStatus;
  final dynamic eMail;
  final String comments;
  final List<Tender> tender;
  final DateTime reqDate;
  final dynamic sscOffice;

  factory Model.fromJson(Map<String, dynamic> json) => Model(
    id: json["\u0024id"] == null ? null : json["\u0024id"],
    goodsRef: json["goods_ref"] == null ? null : json["goods_ref"],
    loyer: json["loyer"] == null ? null : json["loyer"],
    bnCode: json["bn_code"] == null ? null : json["bn_code"],
    loyeeNo: json["loyee_no"] == null ? null : json["loyee_no"],
    contactName: json["contact_name"],
    contactTel: json["contact_tel"],
    bnDesc: json["bn_desc"] == null ? null : json["bn_desc"],
    reqStatus: json["req_status"] == null ? null : json["req_status"],
    eMail: json["e_mail"],
    comments: json["comments"] == null ? null : json["comments"],
    tender: json["tender"] == null ? null : List<Tender>.from(json["tender"].map((x) => Tender.fromJson(x))),
    reqDate: json["req_date"] == null ? null : DateTime.parse(json["req_date"]),
    sscOffice: json["ssc_office"],
  );

  Map<String, dynamic> toJson() => 
    "\u0024id": id == null ? null : id,
    "goods_ref": goodsRef == null ? null : goodsRef,
    "loyer": loyer == null ? null : loyer,
    "bn_code": bnCode == null ? null : bnCode,
    "loyee_no": loyeeNo == null ? null : loyeeNo,
    "contact_name": contactName,
    "contact_tel": contactTel,
    "bn_desc": bnDesc == null ? null : bnDesc,
    "req_status": reqStatus == null ? null : reqStatus,
    "e_mail": eMail,
    "comments": comments == null ? null : comments,
    "tender": tender == null ? null : List<dynamic>.from(tender.map((x) => x.toJson())),
    "req_date": reqDate == null ? null : reqDate.toIso8601String(),
    "ssc_office": sscOffice,
  ;


class Tender 
  Tender(
    this.id,
    this.goodsRef,
    this.inNo,
    this.tenderNo,
    this.closingDate,
  );

  final String id;
  final int goodsRef;
  final int inNo;
  final String tenderNo;
  final String closingDate;

  factory Tender.fromJson(Map<String, dynamic> json) => Tender(
    id: json["\u0024id"] == null ? null : json["\u0024id"],
    goodsRef: json["goods_ref"] == null ? null : json["goods_ref"],
    inNo: json["in_no"] == null ? null : json["in_no"],
    tenderNo: json["tender_no"] == null ? null : json["tender_no"],
    closingDate: json["closing_date"] == null ? null : json["closing_date"],
  );

  Map<String, dynamic> toJson() => 
    "\u0024id": id == null ? null : id,
    "goods_ref": goodsRef == null ? null : goodsRef,
    "in_no": inNo == null ? null : inNo,
    "tender_no": tenderNo == null ? null : tenderNo,
    "closing_date": closingDate == null ? null : closingDate,
  ;

从 php api 获取数组的代码是 fetch() async

    String apiurl = "";
    var response = await http.post(Uri.parse(apiurl), body: 
      'username': email //get the username text
    );

    if(response.statusCode==200) //as wish wish check your response
        
      List<Model> model =  jsonDecode(response.body).map((item) => item).toList();
      print(model.first);
      return model;


    
    return Table( //if data is loaded then show table
      border: TableBorder.all(width:1, color:Colors.black45),
      children: toList.map((nameone)
        return TableRow( //return table row in every loop
            children: [
              //table cells inside table row
              TableCell(child: Padding(
                  padding: EdgeInsets.all(5),
                  child:Text(nameone.sn)
              )
              ),
              TableCell(child: Padding(
                  padding: EdgeInsets.all(5),
                  child:Text(nameone.name)
              )
              ),
              TableCell(child: Padding(
                  padding: EdgeInsets.all(5),
                  child:Text(nameone.address)
              )
              ),
              TableCell(child: Padding(
                  padding: EdgeInsets.all(5),
                  child:Text(nameone.phone)
              )
              ),
            ]
        );
      ).toList(),
    );
  

问题是收到数据后，我想用箭头中的箭头填充表格上的每一行...

当前错误消息是 NoSuchMethodError: The getter 'length' was called on null

如何修复错误并使用来自 api 的数组数据填充表

api返回的例子是

    "$id":"6",
    "goods_ref":60,
    "loyer":"",
    "bn_code":"",
    "loyee_no":1,
    "contact_name":null,
    "contact_tel":null,
    "bn_desc":"DEVELOP PAYROLL HR SYSTEMS",
    "req_status":"N",
    "e_mail":null,
    "comments":"",
    "tender":[
        "$id":"7",
        "goods_ref":0,
        "in_no":1,
        "tender_no":"GENERAL",
        "closing_date":""
        ,
        "$id":"8",
        "goods_ref":0,
        "in_no":2,
        "tender_no":"GENERAL",
        "closing_date":""
        
    ],
    "req_date":"2020-02-20T00:00:00",
    "ssc_office":null
,

【参考方案1】：

有些值是空的，所以在将它分配给小部件时，如果它为空，请检查是否为它分配了一个空字符串。例如：Text(nameone.sn ?? "")

从 api 收到数据后，您可以从中创建一个表。

Widget myTable;
Future<void> fetchItems() async 
    String apiurl = "";
    var response = await http.post(Uri.parse(apiurl), body: 
       'username': email //get the username text
    );

    if(response.statusCode==200) //as wish wish check your response
    
       List<Model> model =  jsonDecode(response.body).map((item) => item).toList();
       setState(()
            myTable = Table( //if data is loaded then show table
         border: TableBorder.all(width:1, color:Colors.black45),
        children: model.map((nameone)
          return TableRow( //return table row in every loop
        children: [
          //table cells inside table row
          TableCell(child: Padding(
              padding: EdgeInsets.all(5),
              child:Text(nameone.sn ?? "")
          )
          ),
          TableCell(child: Padding(
              padding: EdgeInsets.all(5),
              child:Text(nameone.name ?? "")
          )
          ),
          TableCell(child: Padding(
              padding: EdgeInsets.all(5),
              child:Text(nameone.address ?? "")
          )
          ),
          TableCell(child: Padding(
              padding: EdgeInsets.all(5),
              child:Text(nameone.phone ?? "")
          )
          ),
         ]
        );
       ).toList(),
       );
       );
      
    

【讨论】：

如何将该表更改为动态...从 api 获取数据并分配给每一行 ....动态

当您从api中提取数据时，将其分配给一个widget并将该widget作为主体