Beginner's Guide to Working with JSON in Dart

1. Parsing JSON in Dart

JavaScript Object Notation (JSON) is a lightweight, text-based open standard, designed and developed for human-readable data interchange Douglas Crockford specified the JSON format, which is also described in RFC 4627. Application/JSON is the official internet media type for JSON and .json is the extension for the JSON filename.

JSON, being derived from JavaScript is a language-independent data format. It is included in many modern programming languages such as Dart, to generate and parse JSON format data.

JSON parsing is commonly used in applications to fetch data from the internet.

Depending on how much JSON data must be processed, there are two options:

• Write all the JSON parsing codes manually
• Automate the process of code generation

Write all the JSON parsing codes manually

Parsing the JSON code manually requires the following processes:

In such a case, code generation tools can be used as follows:

Understanding the structure of a JSON document.

In this code, a JSON object can be seen with the keys CarName, Brand, and Reviews as a list inside a JSON document. Inside the Reviews list, there are two keys namely Rating and Condition.

A JSON document represents a map of key-value pairs.

JSON data can contain both maps of key-value pairs using ({}) and lists using ([]) separated by a colon (:). Each key-value pair is separated by a comma (,). Nested collections are created with a combination of these two, which represent a complex structure in JSON.

Lists the different data types included in JSON.

The JSON is encoded as a string.

final json = '{ "CarName": "Camry", "Brand": "Toyota", "Reviews": [{ "Rating": 4.0, "Condition": "Excellent"}]}';

When JSON data is received as a string from the network, it must be decoded or deserialized. This process of deserializing the data is called decoding.

Decoding JSON with dart:convert

In this code, a package dart:convert is used to decode JSON data. Variable JSON represents response data received from the network. The JSON string will be decoded to JSON using the jsonDecode() function in the dart:convert package. Lastly, the output of the parsed JSON will be printed.

Parsing JSON to model class

Dart is a statically typed language. Hence, it is essential to convert JSON data into model classes. These model classes represent real-world objects and make the most of the type system. The values in the JSON data should be studied and a Dart class with all the values in the JSON object should be created.

In this code, there are two keys, CarName and brand, both of type String. So, a new name rating class can be created in Dart to represent this data, and these variables can be added. After that, factory methods must be used to map the JSON data to the Dart model object.

In this code, a model class Cars has been created which can be used to decode JSON data.

This code displays a fragment of code demonstrating how JSON data can be read using the model class instead of parsedJson['CarName'] and parsedJson['brand'].

In other words, a factory constructor will return an already created object, thus improving memory and performance, whereas a constructor will create a new instance each time.

In this code, a factory constructor has been created for the Cars class. The variables CarName and brand are assigned to the JSON data CarName and brand respectively.

Note: If you are using a 2.x version of Dart, you may get a type safety error. To resolve this, you can add a? with the variable declaration to prevent a compiler error as follows:

Serialization with toJson()

Parsing JSON data is very useful, but at times depending on the scenario, a model object has to be converted back to JSON data for sending it over the network. To accomplish this, use the toJson() function in Dart.

In this code, we include the class Cars and a toJson() method defined for Cars. The toJson() method returns a map literal with non-null key-value pairs. In the main() function, the Cars class object is created with the values for CarName and brand. This object is then converted to a map using the toJson() method and stored in a variable called jsonMap. This jsonMap is then encoded and JSON is then printed in the console.