JSON handling
- Flutter course
- Intermediate
- Lesson 63/99
- 4 min
Convert the JSON response to a model with fromJson.
Turning the response into a model
You first turn the JSON string from the API into a Map with jsonDecode, then build a model with Weather.fromJson. This gives you a type-safe object instead of a raw Map.
import 'dart:convert';
Weather parseWeather(String body) {
final json = jsonDecode(body) as Map<String, dynamic>;
return Weather.fromJson(json);
}Nested JSON and access
Some APIs wrap weather data in nested objects. After jsonDecode you reach inner values with square brackets, then pass them to fromJson.
const body = '{"main": {"sicaklik": 21.0}, "sehir": "İzmir"}';
final json = jsonDecode(body) as Map<String, dynamic>;
final sicaklik = (json['main']['sicaklik'] as num).toDouble();
print(sicaklik); // 21.0Practice The parseWeather function
Write a parseWeather function: decode the body string into a Map with jsonDecode, convert it to a model with Weather.fromJson, and return it. In main, parse the given string and print the sehir field.
Starter code
import 'dart:convert';
class Weather {
final String sehir;
final double sicaklik;
Weather(this.sehir, this.sicaklik);
factory Weather.fromJson(Map<String, dynamic> json) {
return Weather(
json['sehir'] as String,
(json['sicaklik'] as num).toDouble(),
);
}
}
// parseWeather fonksiyonunu yaz
void main() {
const body = '{"sehir": "Bursa", "sicaklik": 16.0}';
// body'yi parseWeather ile çöz ve sehir'ini yazdır
}Sample solution
import 'dart:convert';
class Weather {
final String sehir;
final double sicaklik;
Weather(this.sehir, this.sicaklik);
factory Weather.fromJson(Map<String, dynamic> json) {
return Weather(
json['sehir'] as String,
(json['sicaklik'] as num).toDouble(),
);
}
}
Weather parseWeather(String body) {
final json = jsonDecode(body) as Map<String, dynamic>;
return Weather.fromJson(json);
}
void main() {
const body = '{"sehir": "Bursa", "sicaklik": 16.0}';
final w = parseWeather(body);
print(w.sehir);
}Expected output
Bursa
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the correct way to turn an API response into a Weather model?
- Check response.statusCode
- Call jsonEncode(body)
- Decode body with jsonDecode into a Map and pass it to Weather.fromJson Correct answer
- Call http.get(body)
Explanation: jsonDecode turns the string into a Map; Weather.fromJson builds a model from the Map. jsonEncode serializes an object, http.get takes a Uri not a string, and statusCode only shows status.
2 Decode the JSON string to a Map
import 'dart:convert';
Weather parseWeather(String body) {
final json = ____ as Map<String, dynamic>;
return Weather.fromJson(json);
}import 'dart:convert';
Weather parseWeather(String body) {
final json = jsonDecode(body) as Map<String, dynamic>;
return Weather.fromJson(json);
}Explanation: jsonDecode(body) turns the string into a Map; then as Map<String, dynamic> specifies the type. jsonEncode produces a string, http.get sends a request, and fromJson expects a Map.
3 JSON processing parts
| Term | Meaning |
|---|---|
jsonDecode(body) |
Converts the string to a Map |
as Map<String, dynamic> |
Type specification |
Weather.fromJson(json) |
Model creation |
response.body |
API response string |