How to parse this json object correctly? - flutter

Question

As a learner, I'm trying to build my first project, however I'm facing a problem trying to parse this json object
{
"_id": 14080,
"ankamaId": 14080,
"name": "Amulette Séculaire",
"level": 200,
"type": "Amulette",
"imgUrl": "https://s.ankama.com/www/static.ankama.com/dofus-touch/www/game/items/200/1230.png",
"url": "https://www.dofus-touch.com/fr/mmorpg/encyclopedie/equipements/14080-amulette-seculaire",
"description": "Finalement, le secteur de la bijouterie n'a pas tellement évolué ces cent dernières années.",
"statistics": [
{
"Vitalité": {
"min": 251,
"max": 300
}
},
{
"Intelligence": {
"min": 61,
"max": 80
}
},
{
"Agilité": {
"min": 16,
"max": 25
}
},
{
"Sagesse": {
"min": 31,
"max": 40
}
},
{
"PA": {
"min": 1,
"max": null
}
},
{
"Prospection": {
"min": 16,
"max": 20
}
},
{
"Dommages Feu": {
"min": 8,
"max": 12
}
},
{
"Dommages Air": {
"min": 8,
"max": 12
}
},
{
"% Résistance Neutre": {
"min": 6,
"max": 8
}
},
{
"% Résistance Feu": {
"min": 6,
"max": 8
}
},
{
"Résistance Critiques": {
"min": 11,
"max": 15
}
}
],
}
Below is the way I'm parsing the object.
item_model.dart
#JsonSerializable(explicitToJson: true)
class Item {
int id;
int ankamaId;
String name;
int level;
String type;
String imgUrl;
String url;
String description;
List<Map<String, Statistic>> statistics;
Item({
this.id,
this.ankamaId,
this.name,
this.level,
this.type,
this.imgUrl,
this.url,
this.description,
this.statistics,
});
factory Item.fromJson(Map<String,dynamic> data) => _$ItemFromJson(data);
Map<String,dynamic> toJson() => _$ItemToJson ( this);
}
#JsonSerializable()
class Statistic {
int max;
int min;
Statistic({
this.min,
this.max,
});
factory Statistic.fromJson(Map<String,dynamic> data) => _$StatisticFromJson(data);
Map<String,dynamic> toJson() => _$StatisticToJson(this);
}
item_model.g.dart
Item _$ItemFromJson(Map<String, dynamic> json) {
return Item(
id: json['id'] as int,
ankamaId: json['ankamaId'] as int,
name: json['name'] as String,
level: json['level'] as int,
type: json['type'] as String,
imgUrl: json['imgUrl'] as String,
url: json['url'] as String,
description: json['description'] as String,
statistics: (json['statistics'] as List)
?.map((e) => (e as Map<String, dynamic>)?.map(
(k, e) => MapEntry(
k,
e == null
? null
: Statistic.fromJson(e as Map<String, dynamic>)),
))
?.toList(),
);
}
Map<String, dynamic> _$ItemToJson(Item instance) => <String, dynamic>{
'id': instance.id,
'ankamaId': instance.ankamaId,
'name': instance.name,
'level': instance.level,
'type': instance.type,
'imgUrl': instance.imgUrl,
'url': instance.url,
'description': instance.description,
'statistics': instance.statistics
?.map((e) => e?.map((k, e) => MapEntry(k, e?.toJson())))
?.toList(),
};
Statistic _$StatisticFromJson(Map<String, dynamic> json) {
return Statistic(
min: json['min'] as int,
max: json['max'] as int,
);
}
Map<String, dynamic> _$StatisticToJson(Statistic instance) => <String, dynamic>{
'max': instance.max,
'min': instance.min,
};
Basically, what I want to do is show in a listview the max, and the min attribute of each element of the statistics list.
Thank you so much in advance.

Answer 1

Make sure the order of the model class, is same as that of the Api data. Also the data types used is compatible. Here errors can creep in. I don't see any other issues in the code

Answer 2

You can use this site for get your model from json, just copy and past

Answer 3

There's a brilliant tool (not the one that other ppl linked) that creates dart code for your JSON:
https://javiercbk.github.io/json_to_dart/
It helped me a ton when working with different APIs.
The dart code in your case would be this:
class myJson {
int iId;
int ankamaId;
String name;
int level;
String type;
String imgUrl;
String url;
String description;
List<Statistics> statistics;
myJson(
{this.iId,
this.ankamaId,
this.name,
this.level,
this.type,
this.imgUrl,
this.url,
this.description,
this.statistics});
myJson.fromJson(Map<String, dynamic> json) {
iId = json['_id'];
ankamaId = json['ankamaId'];
name = json['name'];
level = json['level'];
type = json['type'];
imgUrl = json['imgUrl'];
url = json['url'];
description = json['description'];
if (json['statistics'] != null) {
statistics = new List<Statistics>();
json['statistics'].forEach((v) {
statistics.add(new Statistics.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['_id'] = this.iId;
data['ankamaId'] = this.ankamaId;
data['name'] = this.name;
data['level'] = this.level;
data['type'] = this.type;
data['imgUrl'] = this.imgUrl;
data['url'] = this.url;
data['description'] = this.description;
if (this.statistics != null) {
data['statistics'] = this.statistics.map((v) => v.toJson()).toList();
}
return data;
}
}
class Statistics {
Vitalit vitalit;
Vitalit intelligence;
Vitalit agilit;
Vitalit sagesse;
PA pA;
Vitalit prospection;
Vitalit dommagesFeu;
Vitalit dommagesAir;
Vitalit rSistanceNeutre;
Vitalit rSistanceFeu;
Vitalit rSistanceCritiques;
Statistics(
{this.vitalit,
this.intelligence,
this.agilit,
this.sagesse,
this.pA,
this.prospection,
this.dommagesFeu,
this.dommagesAir,
this.rSistanceNeutre,
this.rSistanceFeu,
this.rSistanceCritiques});
Statistics.fromJson(Map<String, dynamic> json) {
vitalit = json['Vitalité'] != null
? new Vitalit.fromJson(json['Vitalité'])
: null;
intelligence = json['Intelligence'] != null
? new Vitalit.fromJson(json['Intelligence'])
: null;
agilit =
json['Agilité'] != null ? new Vitalit.fromJson(json['Agilité']) : null;
sagesse =
json['Sagesse'] != null ? new Vitalit.fromJson(json['Sagesse']) : null;
pA = json['PA'] != null ? new PA.fromJson(json['PA']) : null;
prospection = json['Prospection'] != null
? new Vitalit.fromJson(json['Prospection'])
: null;
dommagesFeu = json['Dommages Feu'] != null
? new Vitalit.fromJson(json['Dommages Feu'])
: null;
dommagesAir = json['Dommages Air'] != null
? new Vitalit.fromJson(json['Dommages Air'])
: null;
rSistanceNeutre = json['% Résistance Neutre'] != null
? new Vitalit.fromJson(json['% Résistance Neutre'])
: null;
rSistanceFeu = json['% Résistance Feu'] != null
? new Vitalit.fromJson(json['% Résistance Feu'])
: null;
rSistanceCritiques = json['Résistance Critiques'] != null
? new Vitalit.fromJson(json['Résistance Critiques'])
: null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.vitalit != null) {
data['Vitalité'] = this.vitalit.toJson();
}
if (this.intelligence != null) {
data['Intelligence'] = this.intelligence.toJson();
}
if (this.agilit != null) {
data['Agilité'] = this.agilit.toJson();
}
if (this.sagesse != null) {
data['Sagesse'] = this.sagesse.toJson();
}
if (this.pA != null) {
data['PA'] = this.pA.toJson();
}
if (this.prospection != null) {
data['Prospection'] = this.prospection.toJson();
}
if (this.dommagesFeu != null) {
data['Dommages Feu'] = this.dommagesFeu.toJson();
}
if (this.dommagesAir != null) {
data['Dommages Air'] = this.dommagesAir.toJson();
}
if (this.rSistanceNeutre != null) {
data['% Résistance Neutre'] = this.rSistanceNeutre.toJson();
}
if (this.rSistanceFeu != null) {
data['% Résistance Feu'] = this.rSistanceFeu.toJson();
}
if (this.rSistanceCritiques != null) {
data['Résistance Critiques'] = this.rSistanceCritiques.toJson();
}
return data;
}
}
class Vitalit {
int min;
int max;
Vitalit({this.min, this.max});
Vitalit.fromJson(Map<String, dynamic> json) {
min = json['min'];
max = json['max'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['min'] = this.min;
data['max'] = this.max;
return data;
}
}
class PA {
int min;
Null max;
PA({this.min, this.max});
PA.fromJson(Map<String, dynamic> json) {
min = json['min'];
max = json['max'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['min'] = this.min;
data['max'] = this.max;
return data;
}
}

Answer 4

You can use this tool which you just provide it with the JSON message and it will give you a class with all the variables and two function by which can parse the JSON message to the object or vice versa.
Steps:
insert a JSON message to the tool and give the class a name (don't forget to choose dart as the language)
create a new dart file and paste the class from the tool (let's assume the class name is Item)
Call final item = itemFromJson(jsonString); for parsing the JSON to the new object
Which then you can access the variables by via e.g. item.id
Edit:
so for your code, it will be:
item_model.dart
// To parse this JSON data, do
//
// final item = itemFromJson(jsonString);
import 'dart:convert';
Item itemFromJson(String str) => Item.fromJson(json.decode(str));
String itemToJson(Item data) => json.encode(data.toJson());
class Item {
Item({
this.id,
this.ankamaId,
this.name,
this.level,
this.type,
this.imgUrl,
this.url,
this.description,
this.statistics,
});
int id;
int ankamaId;
String name;
int level;
String type;
String imgUrl;
String url;
String description;
List<Map<String, Statistic>> statistics;
factory Item.fromJson(Map<String, dynamic> json) => Item(
id: json["_id"],
ankamaId: json["ankamaId"],
name: json["name"],
level: json["level"],
type: json["type"],
imgUrl: json["imgUrl"],
url: json["url"],
description: json["description"],
statistics: List<Map<String, Statistic>>.from(json["statistics"].map((x) => Map.from(x).map((k, v) => MapEntry<String, Statistic>(k, Statistic.fromJson(v))))),
);
Map<String, dynamic> toJson() => {
"_id": id,
"ankamaId": ankamaId,
"name": name,
"level": level,
"type": type,
"imgUrl": imgUrl,
"url": url,
"description": description,
"statistics": List<dynamic>.from(statistics.map((x) => Map.from(x).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())))),
};
}
class Statistic {
Statistic({
this.min,
this.max,
});
int min;
int max;
factory Statistic.fromJson(Map<String, dynamic> json) => Statistic(
min: json["min"],
max: json["max"] == null ? null : json["max"],
);
Map<String, dynamic> toJson() => {
"min": min,
"max": max == null ? null : max,
};
}
You can access the variables via:
void main(){
String jsonString = "{\"_id\":14080,\"ankamaId\":14080,\"name\":\"Amulette S\u00e9culaire\",\"level\":200,\"type\":\"Amulette\",\"imgUrl\":\"https:\/\/s.ankama.com\/www\/static.ankama.com\/dofus-touch\/www\/game\/items\/200\/1230.png\",\"url\":\"https:\/\/www.dofus-touch.com\/fr\/mmorpg\/encyclopedie\/equipements\/14080-amulette-seculaire\",\"description\":\"Finalement, le secteur de la bijouterie n'a pas tellement \u00e9volu\u00e9 ces cent derni\u00e8res ann\u00e9es.\",\"statistics\":[{\"Vitalit\u00e9\":{\"min\":251,\"max\":300}},{\"Intelligence\":{\"min\":61,\"max\":80}},{\"Agilit\u00e9\":{\"min\":16,\"max\":25}},{\"Sagesse\":{\"min\":31,\"max\":40}},{\"PA\":{\"min\":1,\"max\":null}},{\"Prospection\":{\"min\":16,\"max\":20}},{\"Dommages Feu\":{\"min\":8,\"max\":12}},{\"Dommages Air\":{\"min\":8,\"max\":12}},{\"% R\u00e9sistance Neutre\":{\"min\":6,\"max\":8}},{\"% R\u00e9sistance Feu\":{\"min\":6,\"max\":8}},{\"R\u00e9sistance Critiques\":{\"min\":11,\"max\":15}}]}";
final device = deviceFromJson(jsonString);
print(device.id);
}