Dart JSON

last modified January 28, 2024

In this article we show how to work with JSON in Dart language. We use the dart:convert library.

JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easily read and written by humans and parsed and generated by machines. The application/json is the official Internet media type for JSON. The JSON filename extension is .json.

Dart also has JSON generation libraries package:json_serializable and package:built_value. In this article we focus on the built-in dart:convert library.

For each class that is going to be converted to/from JSON, we define two methods: fromJson and toJson.

The fromJson is used for constructing a new object instance from a map structure. The toJson method converts a class instance into a map. These functions are used in conjunction with the dart:convert's json.decode and json.encode.

The json.decode function parses the JSON string and returns the resulting Json object (a Dart map). The json.encode function converts an object to a JSON string.

Dart JSON simple example

The following is a simple Dart example that works with JSON data.

import 'dart:convert';
class User {
 final String name;
 final String occupation;
 User(this.name, this.occupation);
 User.fromJson(Map<String, dynamic> m)
 : name = m['name'],
 occupation = m['occupation'];
 Map<String, dynamic> toJson() => {
 'name': name,
 'occupation': occupation,
 };
 @override
 String toString() {
 return "$name|$occupation";
 }
}
void main() {
 final u1Json = '{"name": "John Doe", "occupation": "gardener"}';
 final u1 = User.fromJson(json.decode(u1Json));
 print(u1);
 final u2 = User('Roger Roe', 'gardener');
 final u2Json = json.encode(u2);
 print(u2Json);
}

In the program, we convert a JSON string to a Dart object and vice versa.

import 'dart:convert';

We import the dart:convert library.

User.fromJson(Map<String, dynamic> m)
 : name = m['name'],
 occupation = m['occupation'];

This creates a new User instance from the map structure.

Map<String, dynamic> toJson() => {
 'name': name,
 'occupation': occupation,
};

The toJson method creates a map structure from an object instance.

final u1Json = '{"name": "John Doe", "occupation": "gardener"}';

We define a JSON string.

final u1 = User.fromJson(json.decode(u1Json));

We use json.decode to convert the string to a map and pass it to the User.fromJson method to create a User object from the generated map.

final u2 = User('Roger Roe', 'gardener');
final u2Json = json.encode(u2);

Now we have the reverse operation. We define a User object and transform it into a JSON string using json.encode.

$ dart main.dart
John Doe|gardener
{"name":"Roger Roe","occupation":"gardener"}

---

We also have jsonDecode and jsonEncode shorthand functions, which are useful if a local variable shadows the global json constant.

import 'dart:convert';
class User {
 final String name;
 final String occupation;
 User(this.name, this.occupation);
 User.fromJson(Map<String, dynamic> m)
 : name = m['name'],
 occupation = m['occupation'];
 Map<String, dynamic> toJson() => {
 'name': name,
 'occupation': occupation,
 };
 @override
 String toString() {
 return "$name|$occupation";
 }
}
void main() {
 final u1Json = '{"name": "John Doe", "occupation": "gardener"}';
 final u1 = User.fromJson(jsonDecode(u1Json));
 print(u1);
 final u2 = User('Roger Roe', 'gardener');
 final u2Json = jsonEncode(u2);
 print(u2Json);
}

In the program we do the same convertions with jsonDecode and jsonEncode.

Dart list of Json objects

In the next example, we convert a list of Json objects into a JSON string.

import 'dart:convert';
void main() {
 final users = [
 {'name': 'John Doe', 'occupation': 'gardener'},
 {'name': 'Roger Roe', 'occupation': 'driver'},
 {'name': 'Thomas Brown', 'occupation': 'teacher'}
 ];
 final res = json.encode(users);
 print(res);
}

We have a list of users. Each user is defined by a Map<String, String>. We convert the list into a JSON string with json.encode.

$ dart main.dart
[{"name":"John Doe","occupation":"gardener"},{"name":"Roger Roe","occupation":"driver"},
 {"name":"Thomas Brown","occupation":"teacher"}]

Dart list of objects

In the next example, we work with a list of User objects.

import 'dart:convert';
class User {
 final String name;
 final String occupation;
 User(this.name, this.occupation);
 User.fromJson(Map<String, dynamic> m)
 : name = m['name'],
 occupation = m['occupation'];
 Map<String, dynamic> toJson() => {
 'name': name,
 'occupation': occupation,
 };
 @override
 String toString() {
 return "$name|$occupation";
 }
}
void main() {
 final users = <User>[
 User("John Doe", "gardener"),
 User("Roger Roe", "driver"),
 User("Finn Bradley", "teacher")
 ];
 String res = json.encode(users);
 print(res);
 print('----------------------------------');
 List<dynamic> data = json.decode(res);
 List<User> users2 =
 List<User>.from(data.map<User>((dynamic e) => User.fromJson(e)));
 print(users2);
}

We convert a list of users into a JSON string and vice versa.

final users = <User>[
 User("John Doe", "gardener"),
 User("Roger Roe", "driver"),
 User("Finn Bradley", "teacher")
];

We define a list of user objects.

String res = json.encode(users);

The list is encoded into a JSON string with json.encode.

List<dynamic> data = json.decode(res);

We decode the JSON string into a list.

List<User> users2 =
 List<User>.from(data.map<User>((dynamic e) => User.fromJson(e)));

The list is transformed into a list of User instances.

$ dart main.dart 
[{"name":"John Doe","occupation":"gardener"},{"name":"Roger Roe","occupation":"driver"},
 {"name":"Finn Bradley","occupation":"teacher"}]
----------------------------------
[John Doe|gardener, Roger Roe|driver, Finn Bradley|teacher]

Dart fetch JSON data from URL

In the next example, we fetch JSON data from an URL resource.

import 'dart:convert';
import 'package:http/http.dart' as http;
class User {
 final int id;
 final String firstName;
 final String lastName;
 final String email;
 User(this.id, this.firstName, this.lastName, this.email);
 User.fromJson(Map<String, dynamic> m)
 : id = m['id'],
 firstName = m['first_name'],
 lastName = m['last_name'],
 email = m['email'];
 Map<String, dynamic> toJson() => {
 'id': id,
 'first_name': firstName,
 'last_name': lastName,
 'email': email,
 };
 @override
 String toString() {
 return "$id|$firstName|$lastName|$email";
 }
}
void main() async {
 final url = 'webcode.me';
 final path = '/users.json';
 final resp = await http.get(Uri.http(url, path));
 List<dynamic> data = json.decode(resp.body)['users'];
 List<User> users =
 List<User>.from(data.map<User>((dynamic e) => User.fromJson(e)));
 print(users);
 print(users[0]);
 print(json.encode(users[0]));
}

In the example, we generate a GET request to a web resource. The resource is in JSON format.

class User {
 final int id;
 final String firstName;
 final String lastName;
 final String email;
 User(this.id, this.firstName, this.lastName, this.email);
 User.fromJson(Map<String, dynamic> m)
 : id = m['id'],
 firstName = m['first_name'],
 lastName = m['last_name'],
 email = m['email'];
 Map<String, dynamic> toJson() => {
 'id': id,
 'first_name': firstName,
 'last_name': lastName,
 'email': email,
 };
 @override
 String toString() {
 return "$id|$firstName|$lastName|$email";
 }
}

We have a User class. The JSON resource has the following fields: id, first_name, last_name, and email. We define the User.fromJson and toJson methods.

final url = 'webcode.me';
final path = '/users.json';
final resp = await http.get(Uri.http(url, path));

We generate a GET request to the specified resource.

List<dynamic> data = json.decode(resp.body)['users'];

We decode the JSON resource into a list. The resource is a named list; therefore, we pick the users field.

List<User> users =
 List<User>.from(data.map<User>((dynamic e) => User.fromJson(e)));

The list is transformed into a list of User objects.

$ dart main.dart
[1|Robert|Schwartz|rob23@gmail.com, 2|Lucy|Ballmer|lucyb56@gmail.com, 
 3|Anna|Smith|annasmith23@gmail.com, 4|Robert|Brown|bobbrown432@yahoo.com, 
 5|Roger|Bacon|rogerbacon12@yahoo.com]
1|Robert|Schwartz|rob23@gmail.com
{"id":1,"first_name":"Robert","last_name":"Schwartz","email":"rob23@gmail.com"}

Source

Dart Using JSON Guide

In this article we have worked with JSON data in Dart. We utilized the dart:convert library.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all Dart tutorials.