When I first started working with the APIs in Flutter, JSON parsing really gave me a lot of trouble. And I’m sure, it leaves a lot of beginners in the same situation. In this article, I will show you some ways to work with json in Flutter. Here I will use the dart: convert library. This is the most basic method of parsing, and it’s only recommended if you’re starting with Flutter or you’re building a small project. However, knowing the basics of JSON parsing in Flutter is quite important. When you are good at this or if you need to work with a larger project, consider code generation libraries like json_serializable, etc.If possible, I will explore them in later articles.
JSON structure # 1: Simple map
Here, I have a json string called student.json
1 2 3 4 5 6 | { "id":"487349", "name":"Pooja Bhaumik", "score" : 1000 } |
Rule number 1: Determine the structure. Will the json string be a Map (key-value pair) or a List <‘Map’> ** – Rule number 2: Start with curly braces? It is a map. Start with square brackets? That is the List of maps. **
Let’s create an instance of this json structure file. Here I named it student_model.dart.
1 2 3 4 5 6 7 8 9 10 11 12 | class Student{ String studentId; String studentName; int studentScores; Student({ this.studentId, this.studentName, this.studentScores }); } |
If you pay attention, you will see that there is no mapping between the json strings and this PODO file. Even the entity name doesn’t match. So we have to do the mapping of these class members to the json object. To do that, we need to create a factory method. According to Dart documentation, we use the keyword factory when implementing a constructor don’t always create a new version of the class, and that’s what we need right now.
1 2 3 4 5 6 7 8 | factory Student.fromJson(Map<String, dynamic> parsedJson){ return Student( studentId: parsedJson['id'], studentName : parsedJson['name'], studentScores : parsedJson ['score'] ); } |
Here, we are creating a native method named Student.fromJson whose goal is to decrypt your json simply. Also notice the parameter in the fromJson method. It is a Map <String, dynamic> It means it maps a String key to a dynamic value. That is exactly why we need structure definition. If this json structure is a List < Map >, then this parameter will be different.
2. Object access
Create the file t student_services.dart to call Student.fromJson and retrieve the values from the Student object.
2.1 Add dependencies
1 2 3 4 5 | import 'dart:async' show Future; import 'package:flutter/services.dart' show rootBundle; import 'dart:convert'; import 'package:flutter_json/student_model.dart'; |
2.1 Get the data
1 2 3 4 | Future<String> _loadAStudentAsset() async { return await rootBundle.loadString('assets/student.json'); } |
In this example, we have the json files stored in the assets folder. So we have to load json this way. But if you have your json file in the cloud, you can make a network call. Network calls are outside the scope of this article.
2.3 Read the results
1 2 3 4 5 6 7 | Future loadStudent() async { String jsonString = await _loadAStudentAsset(); final jsonResponse = json.decode(jsonString); Student student = new Student.fromJson(jsonResponse); print(student.studentScores); } |
In this loadStudent () method, Line 1: loads the raw json String from the content. Line 2: Decode this raw json string we get. Line 3: And now we are decoding the decoded json response by calling the Student.fromJson method so that we can now use the Student object to access our entities. Line 4: Like we did here, where we print StudentScores from the Student class. Check your Flutter dashboard to see all your print values. (In Android Studio, in its Run tab) Note: Keep in mind the 3 snippets here we will use that for the next json parser (changing only filename and method name) and I won’t repeat the code here.
3. Structure with arrays
Now we conquer a json structure similar to the one above, but instead of just having single values, it can also have an array of values.
1 2 3 4 5 6 7 8 | { "city": "Mumbai", "streets": [ "address1", "address2" ] } |
Here. We have a json string where address is an array of values. Here I will create a file address_model.dart to describe the structure of the Address object.
1 2 3 4 5 6 7 8 9 10 | class Address { final String city; final List<String> streets; Address({ this.city, this.streets }); } |
Next comes the function factory
1 2 3 4 5 6 7 8 | factory Address.fromJson(Map<String, dynamic> parsedJson) { return new Address( city: parsedJson['city'], streets: parsedJson['streets'], ); } |
Now let’s build address_services.dart by adding the 3 snippets we mentioned above. Be sure to name the file and the method name appropriately. The sample project already has the address_services.dart built for you. Now when you run it, you will get a small error. : /
1 2 | type 'List<dynamic>' is not a subtype of type 'List<String>' |
I tell you, these bugs have been in almost every step of my development with Dart. And you may encounter them as well. So let me explain what this means. We are requesting a List < String > but we are getting a List < dynamic > because our application has not been able to determine their type yet. So we have to explicitly convert this to a List < String >
1 2 3 | var streetsFromJson = parsedJson['streets']; List<String> streetsList = new List<String>.from(streetsFromJson); |
Here, we’re first mapping the streets of our FromJson variable to the Street object. Street.FromJson is still a List <dynamic> . Now we create a new List <String> that explicitly contains all elements from Street.FromJson.
4. List of maps
Here, I have a json string photo.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | [ { "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt", "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/92c952" }, { "albumId": 1, "id": 2, "title": "reprehenderit est deserunt velit ipsam", "url": "http://placehold.it/600/771796", "thumbnailUrl": "http://placehold.it/150/771796" }, { "albumId": 1, "id": 3, "title": "officia porro iure quia iusto qui ipsa ut modi", "url": "http://placehold.it/600/24f355", "thumbnailUrl": "http://placehold.it/150/24f355" } ] |
Next is the photo class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class Photo{ final String id; final String title; final String url; Photo({ this.id, this.url, this.title }) ; factory Photo.fromJson(Map<String, dynamic> json){ return new Photo( id: json['id'].toString(), title: json['title'], url: json['json'], ); } } |
But it is List<Photo> , so this means you have to build a class that contains List<Photo> Yes, I would suggest that.
1 2 3 4 5 6 7 8 | class PhotosList { final List<Photo> photos; PhotosList({ this.photos, }); } |
Also note, this json string is a List<Map> . So in our original method we wouldn’t have the Map <String, dynamic> parameter, since it’s a List. And that is precisely why it is important to define structure first. So our new parameter will be a List<dynamic> .
1 2 3 4 5 6 7 8 9 | factory PhotosList.fromJson(List<dynamic> parsedJson) { List<Photo> photos = new List<Photo>(); return new PhotosList( photos: photos, ); } |
And you will get error: Invalid value: Valid value range is empty: 0 Hey, because we could never use the Photo.fromJson method. What if we add this line of code after initializing the list?
1 2 | photos = parsedJson.map((i)=>Photo.fromJson(i)).toList(); |
Same concept as before, we don’t need to map this to any key from json string, because it’s a List,