使用颤振在 UI 中进行 POST 调用后显示来自 json 响应的特定数据 [英] Display a particular data from a json response after a POST call in the UI using flutter

问题描述

我正在调用一个 POST 请求 API，它接受输入，然后返回他/她的详细信息.所以我已经实现了大部分，我能够从 API 中检索数据并在终端中打印该响应数据.但我需要在 UI 中显示该数据.我添加了一个检查快照是否有数据，所以每次我执行显示数据时我都无法做到这一点，而且由于我正在处理 API 调用，它总是打印出问题.

I am calling a POST request API that takes the inputs and then returns his/her details. So I have implemented most of it and I am able to retrieve the data from the API and print that response data in the terminal. But I need to display that data in the UI. I have added a check that whether the snapshot has data or not, so every time I perform the to display the data I am unable to do that and also since I am handling the API calls it always prints the something have gone wrong.

我附上我的代码片段，以便它们可以帮助您了解我哪里出错了.另外，请参考我在我认为自己犯了错误的地方所做的所有评论.

I am attaching my code snippets so that they might help you understand where I am going wrong. Also, refer to all the comments I have made wherever I thought I am making mistake.

API调用函数:

Future<PanCardVerify> panCardVerify(dynamic param) async {
var client = http.Client();
String? token = await storage.readSecureToken('key');
if (token == null) {
  throw Exception("No token stored in storage");
}
try {
  var response = await client
      .post(
          Uri.https("baseURL", "endpoint"),
          headers: <String, String>{
            'Authorization': 'Token $token',
          },
          body: param)
      .timeout(Duration(seconds: TIME_CONST))
      .catchError(handleError);

  if (response.statusCode == 200) {
    print('Response Body: ${response.body}');
    final data = await jsonDecode(response.body);
    return PanCardVerify.fromJson(data); //This is where I believe I am supposed to return to the snapshot
    );
  } else if (response.statusCode == 400) {
    print("Invalid PAN Card Details");
    return param;
  } else {
    print("Bad Input");
    return param;
  }
} on SocketException {
  throw FetchDataException('message', 'url'); 
} on TimeoutException {
  throw ApiNotRespondingException("message", "url");
}
}

模型类:

import 'dart:convert';

PanCardVerify transactionFromJson(String str) =>
    PanCardVerify.fromJson(json.decode(str));

String transactionToJson(PanCardVerify data) => json.encode(data.toJson());

class PanCardVerify {
  PanCardVerify({
    required this.status,
    this.panData,
  });

  String status;
  PanData? panData;

  factory PanCardVerify.fromJson(Map<String, dynamic> json) => PanCardVerify(
        status: json["status"],
        panData: PanData.fromJson(json["pan_data"]),
      );

  Map<String, dynamic> toJson() => {
        "status": status,
        "pan_data": panData?.toJson(),
      };
}

class PanData {
  PanData({
    required this.code,
    required this.timestamp,
    required this.transactionId,
    required this.data,
  });

  int code;
  int timestamp;
  String transactionId;
  Data data;

  factory PanData.fromJson(Map<String, dynamic> json) => PanData(
        code: json["code"],
        timestamp: json["timestamp"],
        transactionId: json["transaction_id"],
        data: Data.fromJson(json["data"]),
      );

  Map<String, dynamic> toJson() => {
        "code": code,
        "timestamp": timestamp,
        "transaction_id": transactionId,
        "data": data.toJson(),
      };
}

class Data {
  Data({
    required this.entity,
    required this.pan,
    required this.fullName,
    required this.status,
    required this.category,
  });

  String entity;
  String pan;
  String fullName;
  String status;
  String category;

  factory Data.fromJson(Map<String, dynamic> json) => Data(
        entity: json["@entity"],
        pan: json["pan"],
        fullName: json["full_name"],
        status: json["status"],
        category: json["category"],
      );

  Map<String, dynamic> toJson() => {
        "@entity": entity,
        "pan": pan,
        "full_name": fullName,
        "status": status,
        "category": category,
      };
}

异常控制器类:

class BaseController {
  void handleError(error) {
    hideLoading();
    if (error is BadRequestException) {
      var message = error.message;
      DialogHelper.showErroDialog(description: message);
    }  else if (error is SocketException) {
      print(error);
    } else {
      print("Error in the else block");
    }
  }

我试图在其中显示 fullName 的小部件:

Widget where I am trying to display the fullName:

FutureBuilder<PanCardVerify>(
                  future: ApiService().panCardVerify(context),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      PanData? data = snapshot.data!.panData;
                      return Flexible(
                        child: Text('${data!.data.fullName}'),
                      );
                    } else {
                      return Text("Something went wrong");
                    }
                  }),

推荐答案

尝试在这里使用你的 fromJson 构造函数:

Try to use your fromJson constructor here:

if (response.statusCode == 200) {
    print('Response Body: ${response.body}');
    final data = jsonDecode(response.body);
    return PanCardVerify.fromJson(data);     //// here
 
  }

这篇关于使用颤振在 UI 中进行 POST 调用后显示来自 json 响应的特定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！