How to deserialize complex json in Flutter? - json

Question

I have such json from the OpenWeatherMapApi:
{
"coord": {
"lon": 73.9352,
"lat": 40.7306
},
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"base": "stations",
"main": {
"temp": 287.27,
"feels_like": 285.57,
"temp_min": 287.27,
"temp_max": 287.27,
"pressure": 1008,
"humidity": 32,
"sea_level": 1008,
"grnd_level": 695
},
"visibility": 10000,
"wind": {
"speed": 3.67,
"deg": 289,
"gust": 5.14
},
"clouds": {
"all": 87
},
"dt": 1659340567,
"sys": {
"country": "KG",
"sunrise": 1659312024,
"sunset": 1659363640
},
"timezone": 21600,
"id": 8145969,
"name": "Kara-Kulja",
"cod": 200
}
And I used such sample to work with json. But in the tutorial as you can see very simple json was used. But for example if I want to get:
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
]
or:
"coord": {
"lon": 73.9352,
"lat": 40.7306
}
what I have to do? For example I tried to get weather in such way:
class weatherModel {
int id;
String main, description, icon;
weatherModel(
{required this.id, required this.main, required this.description, required this.icon})
factory weatherModel.fromJson(Map<String, dynamic> json) {
return weatherModel(
id: json['id'],
main: json["main"],
description: json["description"],
icon: json["icon"],
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'main': main,
'description': description,
'icon': icon,
};
}
}
class Forecast {
List<weatherModel> weather;
Forecast({required this.weather});
factory Forecast.fromJson(Map<String, dynamic> json) {
return Forecast(
weather: json['weather'],
);
}
Map<String, dynamic> toJson() {
return {
'weather': weather,
};
}
}
but I got such error:
when in comparison class Forecast doesn't have such error. In the clean android development with kotlin I have to declare all fields of this json and then I will be able to get it after getting some response. But in the Flutter I have to create separate models for each complex field or how it has to be? Because then I will need to declare in the Future my model class:
#RestApi(baseUrl: "https://api.openweathermap.org/data/2.5/")
abstract class ApiClient {
factory ApiClient(Dio dio, {String baseUrl}) = _ApiClient;
#GET("weather?lat={lat}&lon={lon}&appid={appid}")
Future<ResponseData> getUsers(#Path("lat") String lat,
#Path("lon") String lon, #Path("appid") String appid);
}
Maybe I did something wrong only because I'm very new in Flutter and in this mobile development.
update
working with the result of deserialization:
#JsonSerializable()
class Forecast {
List<WeatherModel> weather;
Forecast({required this.weather});
factory Forecast.fromJson(Map<String, dynamic> json) =>
_$ForecastFromJson(json);
Map<String, dynamic> toJson() => _$ForecastToJson(this);
}
#JsonSerializable()
class ResponseData {
int code;
dynamic meta;
List<dynamic> data;
ResponseData({required this.code, this.meta, required this.data});
factory ResponseData.fromJson(Map<String, dynamic> json) =>
_$ResponseDataFromJson(json);
Map<String, dynamic> toJson() => _$ResponseDataToJson(this);
}
then I use ResponseData in the api call class.

Answer 1

You can use your data like this
class WeatherModel {
Coord? coord;
List<Weather>? weather;
String? base;
Main? main;
int? visibility;
Wind? wind;
Clouds? clouds;
int? dt;
Sys? sys;
int? timezone;
int? id;
String? name;
int? cod;
WeatherModel(
{this.coord,
this.weather,
this.base,
this.main,
this.visibility,
this.wind,
this.clouds,
this.dt,
this.sys,
this.timezone,
this.id,
this.name,
this.cod});
WeatherModel.fromJson(Map<String, dynamic> json) {
coord = json['coord'] != null ? new Coord.fromJson(json['coord']) : null;
if (json['weather'] != null) {
weather = <Weather>[];
json['weather'].forEach((v) {
weather!.add(new Weather.fromJson(v));
});
}
base = json['base'];
main = json['main'] != null ? new Main.fromJson(json['main']) : null;
visibility = json['visibility'];
wind = json['wind'] != null ? new Wind.fromJson(json['wind']) : null;
clouds =
json['clouds'] != null ? new Clouds.fromJson(json['clouds']) : null;
dt = json['dt'];
sys = json['sys'] != null ? new Sys.fromJson(json['sys']) : null;
timezone = json['timezone'];
id = json['id'];
name = json['name'];
cod = json['cod'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.coord != null) {
data['coord'] = this.coord!.toJson();
}
if (this.weather != null) {
data['weather'] = this.weather!.map((v) => v.toJson()).toList();
}
data['base'] = this.base;
if (this.main != null) {
data['main'] = this.main!.toJson();
}
data['visibility'] = this.visibility;
if (this.wind != null) {
data['wind'] = this.wind!.toJson();
}
if (this.clouds != null) {
data['clouds'] = this.clouds!.toJson();
}
data['dt'] = this.dt;
if (this.sys != null) {
data['sys'] = this.sys!.toJson();
}
data['timezone'] = this.timezone;
data['id'] = this.id;
data['name'] = this.name;
data['cod'] = this.cod;
return data;
}
}
class Coord {
double? lon;
double? lat;
Coord({this.lon, this.lat});
Coord.fromJson(Map<String, dynamic> json) {
lon = json['lon'];
lat = json['lat'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['lon'] = this.lon;
data['lat'] = this.lat;
return data;
}
}
class Weather {
int? id;
String? main;
String? description;
String? icon;
Weather({this.id, this.main, this.description, this.icon});
Weather.fromJson(Map<String, dynamic> json) {
id = json['id'];
main = json['main'];
description = json['description'];
icon = json['icon'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['main'] = this.main;
data['description'] = this.description;
data['icon'] = this.icon;
return data;
}
}
class Main {
double? temp;
double? feelsLike;
double? tempMin;
double? tempMax;
int? pressure;
int? humidity;
int? seaLevel;
int? grndLevel;
Main(
{this.temp,
this.feelsLike,
this.tempMin,
this.tempMax,
this.pressure,
this.humidity,
this.seaLevel,
this.grndLevel});
Main.fromJson(Map<String, dynamic> json) {
temp = json['temp'];
feelsLike = json['feels_like'];
tempMin = json['temp_min'];
tempMax = json['temp_max'];
pressure = json['pressure'];
humidity = json['humidity'];
seaLevel = json['sea_level'];
grndLevel = json['grnd_level'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['temp'] = this.temp;
data['feels_like'] = this.feelsLike;
data['temp_min'] = this.tempMin;
data['temp_max'] = this.tempMax;
data['pressure'] = this.pressure;
data['humidity'] = this.humidity;
data['sea_level'] = this.seaLevel;
data['grnd_level'] = this.grndLevel;
return data;
}
}
class Wind {
double? speed;
int? deg;
double? gust;
Wind({this.speed, this.deg, this.gust});
Wind.fromJson(Map<String, dynamic> json) {
speed = json['speed'];
deg = json['deg'];
gust = json['gust'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['speed'] = this.speed;
data['deg'] = this.deg;
data['gust'] = this.gust;
return data;
}
}
class Clouds {
int? all;
Clouds({this.all});
Clouds.fromJson(Map<String, dynamic> json) {
all = json['all'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['all'] = this.all;
return data;
}
}
class Sys {
String? country;
int? sunrise;
int? sunset;
Sys({this.country, this.sunrise, this.sunset});
Sys.fromJson(Map<String, dynamic> json) {
country = json['country'];
sunrise = json['sunrise'];
sunset = json['sunset'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['country'] = this.country;
data['sunrise'] = this.sunrise;
data['sunset'] = this.sunset;
return data;
}
}
And if you make it using factory Constructor you can use
// To parse this JSON data, do
//
// final weatherModel = weatherModelFromJson(jsonString);
import 'dart:convert';
WeatherModel weatherModelFromJson(String str) => WeatherModel.fromJson(json.decode(str));
String weatherModelToJson(WeatherModel data) => json.encode(data.toJson());
class WeatherModel {
WeatherModel({
this.coord,
this.weather,
this.base,
this.main,
this.visibility,
this.wind,
this.clouds,
this.dt,
this.sys,
this.timezone,
this.id,
this.name,
this.cod,
});
Coord coord;
List<Weather> weather;
String base;
Main main;
int visibility;
Wind wind;
Clouds clouds;
int dt;
Sys sys;
int timezone;
int id;
String name;
int cod;
factory WeatherModel.fromJson(Map<String, dynamic> json) => WeatherModel(
coord: Coord.fromJson(json["coord"]),
weather: List<Weather>.from(json["weather"].map((x) => Weather.fromJson(x))),
base: json["base"],
main: Main.fromJson(json["main"]),
visibility: json["visibility"],
wind: Wind.fromJson(json["wind"]),
clouds: Clouds.fromJson(json["clouds"]),
dt: json["dt"],
sys: Sys.fromJson(json["sys"]),
timezone: json["timezone"],
id: json["id"],
name: json["name"],
cod: json["cod"],
);
Map<String, dynamic> toJson() => {
"coord": coord.toJson(),
"weather": List<dynamic>.from(weather.map((x) => x.toJson())),
"base": base,
"main": main.toJson(),
"visibility": visibility,
"wind": wind.toJson(),
"clouds": clouds.toJson(),
"dt": dt,
"sys": sys.toJson(),
"timezone": timezone,
"id": id,
"name": name,
"cod": cod,
};
}
class Clouds {
Clouds({
this.all,
});
int all;
factory Clouds.fromJson(Map<String, dynamic> json) => Clouds(
all: json["all"],
);
Map<String, dynamic> toJson() => {
"all": all,
};
}
class Coord {
Coord({
this.lon,
this.lat,
});
double lon;
double lat;
factory Coord.fromJson(Map<String, dynamic> json) => Coord(
lon: json["lon"].toDouble(),
lat: json["lat"].toDouble(),
);
Map<String, dynamic> toJson() => {
"lon": lon,
"lat": lat,
};
}
class Main {
Main({
this.temp,
this.feelsLike,
this.tempMin,
this.tempMax,
this.pressure,
this.humidity,
this.seaLevel,
this.grndLevel,
});
double temp;
double feelsLike;
double tempMin;
double tempMax;
int pressure;
int humidity;
int seaLevel;
int grndLevel;
factory Main.fromJson(Map<String, dynamic> json) => Main(
temp: json["temp"].toDouble(),
feelsLike: json["feels_like"].toDouble(),
tempMin: json["temp_min"].toDouble(),
tempMax: json["temp_max"].toDouble(),
pressure: json["pressure"],
humidity: json["humidity"],
seaLevel: json["sea_level"],
grndLevel: json["grnd_level"],
);
Map<String, dynamic> toJson() => {
"temp": temp,
"feels_like": feelsLike,
"temp_min": tempMin,
"temp_max": tempMax,
"pressure": pressure,
"humidity": humidity,
"sea_level": seaLevel,
"grnd_level": grndLevel,
};
}
class Sys {
Sys({
this.country,
this.sunrise,
this.sunset,
});
String country;
int sunrise;
int sunset;
factory Sys.fromJson(Map<String, dynamic> json) => Sys(
country: json["country"],
sunrise: json["sunrise"],
sunset: json["sunset"],
);
Map<String, dynamic> toJson() => {
"country": country,
"sunrise": sunrise,
"sunset": sunset,
};
}
class Weather {
Weather({
this.id,
this.main,
this.description,
this.icon,
});
int id;
String main;
String description;
String icon;
factory Weather.fromJson(Map<String, dynamic> json) => Weather(
id: json["id"],
main: json["main"],
description: json["description"],
icon: json["icon"],
);
Map<String, dynamic> toJson() => {
"id": id,
"main": main,
"description": description,
"icon": icon,
};
}
class Wind {
Wind({
this.speed,
this.deg,
this.gust,
});
double speed;
int deg;
double gust;
factory Wind.fromJson(Map<String, dynamic> json) => Wind(
speed: json["speed"].toDouble(),
deg: json["deg"],
gust: json["gust"].toDouble(),
);
Map<String, dynamic> toJson() => {
"speed": speed,
"deg": deg,
"gust": gust,
};
}

Answer 2

You're missing ";" in this code line. This is why you're having that error.
weatherModel(
{required this.id, required this.main, required this.description, required this.icon}); //here
Additional advice: It's recommended to have Uppercase starting name when it comes to models
weatherModel-> WeatherModel