How can I iterate over each item and render on the screen? - json

Question

I've been trying to iterate over each item for forecast data and can't figure out where the outputs are coming from.. I'm only trying to iterate over temperature, pressure, place name, humidity, wind speed and feels like..
Json
{
"cod": "200",
"message": 0,
"cnt": 40,
"list": [
{
"dt": 1641124800,
"main": {
"temp": 11.74,
"feels_like": 11.08,
"temp_min": 11.74,
"temp_max": 12,
"pressure": 1012,
"sea_level": 1012,
"grnd_level": 1008,
"humidity": 81,
"temp_kf": -0.26
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04d"
}
],
"clouds": {
"all": 75
},
"wind": {
"speed": 5.3,
"deg": 229,
"gust": 11.75
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "d"
},
"dt_txt": "2022-01-02 12:00:00"
},
{
"dt": 1641135600,
"main": {
"temp": 11.86,
"feels_like": 11.11,
"temp_min": 11.86,
"temp_max": 12.09,
"pressure": 1011,
"sea_level": 1011,
"grnd_level": 1006,
"humidity": 77,
"temp_kf": -0.23
},
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"clouds": {
"all": 83
},
"wind": {
"speed": 6.45,
"deg": 223,
"gust": 15.9
},
"visibility": 10000,
"pop": 0.7,
"rain": {
"3h": 0.6
},
"sys": {
"pod": "d"
},
"dt_txt": "2022-01-02 15:00:00"
},
{
"dt": 1641146400,
"main": {
"temp": 11.29,
"feels_like": 10.43,
"temp_min": 11.06,
"temp_max": 11.29,
"pressure": 1011,
"sea_level": 1011,
"grnd_level": 1007,
"humidity": 75,
"temp_kf": 0.23
},
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10n"
}
],
"clouds": {
"all": 92
},
"wind": {
"speed": 6.1,
"deg": 250,
"gust": 13.97
},
"visibility": 10000,
"pop": 0.94,
"rain": {
"3h": 1.01
},
"sys": {
"pod": "n"
},
"dt_txt": "2022-01-02 18:00:00"
},
{
"dt": 1641157200,
"main": {
"temp": 9.54,
"feels_like": 6.37,
"temp_min": 9.54,
"temp_max": 9.54,
"pressure": 1012,
"sea_level": 1012,
"grnd_level": 1009,
"humidity": 76,
"temp_kf": 0
},
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03n"
}
],
"clouds": {
"all": 36
},
"wind": {
"speed": 6.93,
"deg": 244,
"gust": 14.72
},
"visibility": 10000,
"pop": 0,
"sys": {
"pod": "n"
},
"dt_txt": "2022-01-02 21:00:00"
},
{
"dt": 1641546000,
"main": {
"temp": 3.96,
"feels_like": 0.41,
"temp_min": 3.96,
"temp_max": 3.96,
"pressure": 1010,
"sea_level": 1010,
"grnd_level": 1007,
"humidity": 82,
"temp_kf": 0
},
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"clouds": {
"all": 100
},
"wind": {
"speed": 4.29,
"deg": 239,
"gust": 11.29
},
"visibility": 10000,
"pop": 0.02,
"sys": {
"pod": "d"
},
"dt_txt": "2022-01-07 09:00:00"
}
],
"city": {
"id": 2643743,
"name": "London",
"coord": {
"lat": 51.5085,
"lon": -0.1257
},
"country": "GB",
"population": 1000000,
"timezone": 0,
"sunrise": 1641110761,
"sunset": 1641139355
}
}
in forecast.dart
import 'package:forecast/models/weather_data.dart';
class ForecastData {
final List list;
ForecastData({required this.list});
factory ForecastData.fromJson(Map<String, dynamic> json) {
var list = json['list']?.map((e) => e)?.toList(growable: true) ?? [];
List weatherData = [];
list.forEach((e) {
WeatherData w = WeatherData(
placeName: json['city']['name'],
temperature: e['main']['temp'],
feels_like: e['main']["feels_like"],
pressure: e['main']['pressure'],
humidity: e['main']['humidity'],
wind_speed: e['wind']['speed']);
weatherData.add(w);
print(weatherData.toList());
});
return ForecastData(list: weatherData);
}
}
weatherdata.dart
class WeatherData {
String? placeName;
num? temperature;
num? feels_like;
num? pressure;
num? humidity;
num? wind_speed;
WeatherData({
this.placeName,
this.temperature,
this.feels_like,
this.pressure,
this.humidity,
this.wind_speed,
});
#override
String toString() =>
'${placeName ?? 'unknown'}${feels_like ?? 'unknown'}${temperature ?? 'unknown'}${pressure ?? 'unknown'}${humidity ?? 'unknown'}${wind_speed ?? 'unknown'}';
WeatherData.fromJson(Map<String, dynamic> json) {
placeName = json['city']['name'];
temperature = json['list'][0]['main']['temp'];
feels_like = json['list'][0]['main']['temp'];
pressure = json['list'][0]['main']['temp'];
humidity = json['list'][0]['main']['temp'];
wind_speed = json['list'][0]['main']['temp'];
}
}
output
I/flutter (25471): [London11.0811.741012815.3]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45, London10.4311.291011756.1]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45, London10.4311.291011756.1, London6.379.541012766.93]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45, London10.4311.291011756.1, London6.379.541012766.93, London6.229.481013757.18]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45, London10.4311.291011756.1, London6.379.541012766.93, London6.229.481013757.18, London6.039.051013796.02]
I/flutter (25471): [London11.0811.741012815.3, London11.1111.861011776.45, London10.4311.291011756.1, London6.379.541012766.93, London6.229.481013757.18, London6.039.051013796.02, London5.698.681012795.66]
I can't figure out where the problem is..why is my output iterating like this? I just need to iterate over each item and print out each item each time please help!

Answer 1

in forecast.dart, You are printing the whole weatherData list in the iterator list.forEach.
Try changing ,
print(weatherData.toList());
to,
print(w);
And put some spaces in your toString
${placeName ?? 'unknown'} ${feels_like ?? 'unknown'} ${te...
so that you can see where one number ends and the next starts.

Answer 2

I think that you shoul lose the map and review the fromJson parameters...
WeatherData.fromJson(Map<String, dynamic> json) {
placeName = json['city']['name'];
temperature = json['list'][0]['main']['temp'];
feels_like = json['list'][0]['main']['temp'];
pressure = json['list'][0]['main']['temp'];
humidity = json['list'][0]['main']['temp'];
wind_speed = json['list'][0]['main']['temp'];
}