将 API 数据映射到 Dart 类

Question

我在 Dart 中有一种 POJO 类，我想使用 API 调用映射变量。

这是我在 Code.1 中的 POJO 类，

class Elements {
  String onApi;
  String tlApi;
  String pl1Api;
  String pl2Api;
  String dl1Api;
  String dl2Api;
  String fnApi;
  String lnApi;
  String cnApi;
  String eidApi;

  Elements(
      {this.onApi,
      this.tlApi,
      this.pl1Api,
      this.pl2Api,
      this.dl1Api,
      this.dl2Api,
      this.fnApi,
      this.lnApi,
      this.cnApi,
      this.eidApi});

  Elements.fromJson(Map<String, dynamic> json) {
    onApi = json['on_api'];
    tlApi = json['tl_api'];
    pl1Api = json['pl1_api'];
    pl2Api = json['pl2_api'];
    dl1Api = json['dl1_api'];
    dl2Api = json['dl2_api'];
    fnApi = json['fn_api'];
    lnApi = json['ln_api'];
    cnApi = json['cn_api'];
    eidApi = json['eid_api'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['on_api'] = this.onApi;
    data['tl_api'] = this.tlApi;
    data['pl1_api'] = this.pl1Api;
    data['pl2_api'] = this.pl2Api;
    data['dl1_api'] = this.dl1Api;
    data['dl2_api'] = this.dl2Api;
    data['fn_api'] = this.fnApi;
    data['ln_api'] = this.lnApi;
    data['cn_api'] = this.cnApi;
    data['eid_api'] = this.eidApi;
    return data;
  }
}

代码.1

这是我想通过 Code.2 中的 API 调用映射的 JSON 代码，

{
    "on_api": "1",
    "tl_api": "10",
    "pl1_api": "XYZ Chocolates Lounge",
    "pl2_api": "ABC Nagar",
    "dl1_api": "EFGH Software Pvt. Ltd.",
    "dl2_api": "Random Road, Bengaluru - 5600XX",
    "fn_api": "Snehanshu",
    "ln_api": "Bhattacharya",
    "cn_api": "01234",
    "eid_api": "snehanshu@abc.com"
}

代码.2

这是我的 API 调用类 Code.3，

import 'dart:convert';
import 'package:http/http.dart';
import 'package:smoorapplication/src/constants/constants.dart';
import 'package:smoorapplication/src/model/elements.dart';

Future<dynamic> apiGetOrder() async{
  var response = await get(Uri.parse(API_LINK));
  var jsonData = jsonDecode(response.body);
  List<Elements> elements = [];

  for(var u in jsonData){
    Elements element =
    Elements.fromJson(u);
    elements.add(element);
  }

  print(elements.length);
  return elements;
}

代码.3

所以，我需要一些帮助来编写 API 调用的代码，以便它能够成功映射数据。

谢谢

Answer 1

你的模型类

import 'dart:convert';

Element elementFromJson(String str) => Element.fromJson(json.decode(str));

String elementToJson(Element data) => json.encode(data.toJson());

class Element {
Element({
    this.onApi,
    this.tlApi,
    this.pl1Api,
    this.pl2Api,
    this.dl1Api,
    this.dl2Api,
    this.fnApi,
    this.lnApi,
    this.cnApi,
    this.eidApi,
});

String onApi;
String tlApi;
String pl1Api;
String pl2Api;
String dl1Api;
String dl2Api;
String fnApi;
String lnApi;
String cnApi;
String eidApi;

factory Element.fromJson(Map<String, dynamic> json) => Element(
    onApi: json["on_api"],
    tlApi: json["tl_api"],
    pl1Api: json["pl1_api"],
    pl2Api: json["pl2_api"],
    dl1Api: json["dl1_api"],
    dl2Api: json["dl2_api"],
    fnApi: json["fn_api"],
    lnApi: json["ln_api"],
    cnApi: json["cn_api"],
    eidApi: json["eid_api"],
);

Map<String, dynamic> toJson() => {
    "on_api": onApi,
    "tl_api": tlApi,
    "pl1_api": pl1Api,
    "pl2_api": pl2Api,
    "dl1_api": dl1Api,
    "dl2_api": dl2Api,
    "fn_api": fnApi,
    "ln_api": lnApi,
    "cn_api": cnApi,
    "eid_api": eidApi,
};
}

这是你的 getAPiOrder 方法

Future<dynamic> apiGetOrder() async{
var response = await get(Uri.parse(API_LINK));

///if this line doesn't work
Element element = Element.fromJson(respnse.body);

///try this line
Element element = Element.fromJson(Map.from(respnse.body));

 
 return elements;
}