\n In recent mobile app development, the JSON (JavaScript Object Notation) data format is widely used for data transmission and storage. JSON data has a structurally simple form, is highly readable compared to other data formats, and can be easily parsed in most programming languages.\n <\/p>\n
\n JSON is a lightweight data interchange format that is easily readable and writable by both humans and machines. While JSON is based on the syntax of JavaScript object literals, it is also very useful for data interchange between different languages. The main characteristics of JSON are as follows:\n <\/p>\n
\n JSON data is expressed in key-value pairs. Here is an example of a JSON object:\n <\/p>\n
{\n \"name\": \"John Doe\",\n \"age\": 30,\n \"isDeveloper\": true,\n \"skills\": [\"Dart\", \"Flutter\", \"JavaScript\"],\n \"address\": {\n \"city\": \"Seoul\",\n \"postalCode\": \"12345\"\n }\n}<\/code><\/pre>\n3. Using JSON Data in Flutter<\/h2>\n
\n To utilize JSON data in Flutter, you can either fetch data from an external API through HTTP requests or read data from a local JSON file. This section outlines the basic procedures for using JSON data through both methods.\n <\/p>\n
3.1. Fetching JSON Data via HTTP Requests<\/h3>\n
\n You can use the HTTP package in Flutter to fetch JSON data from an API.\n <\/p>\n
Here is an example of code that retrieves JSON data from an API:<\/p>\n
import 'dart:convert';\nimport 'package:http\/http.dart' as http;\n\nFuture fetchData() async {\n final response = await http.get(Uri.parse('https:\/\/api.example.com\/data'));\n\n if (response.statusCode == 200) {\n \/\/ Data successfully returned from the server\n var jsonData = json.decode(response.body);\n print(jsonData);\n } else {\n throw Exception('Error occurred while loading data');\n }\n}<\/void><\/code><\/pre>\n3.2. Reading Data from a Local JSON File<\/h3>\n
\n In some cases, you can read data from a built-in JSON file in the app. You can load a JSON file using the following steps.\n <\/p>\n
Step 1:<\/strong> Add the JSON file to the app’s assets<\/code> folder.<\/p>\nStep 2:<\/strong> Add the assets to the pubspec.yaml<\/code> file.<\/p>\nflutter:\n assets:\n - assets\/data.json<\/code><\/pre>\nStep 3:<\/strong> Write code to read the JSON file:<\/p>\nimport 'dart:convert';\nimport 'package:flutter\/services.dart' as rootBundle;\n\nFuture loadJsonData() async {\n final jsonData = await rootBundle.rootBundle.loadString('assets\/data.json');\n final data = json.decode(jsonData);\n print(data);\n}<\/void><\/code><\/pre>\n4. Connecting JSON Data to Model Classes<\/h2>\n
\n To utilize JSON data in a Flutter app, it is common to convert the data into model classes. Here is an example of how to convert JSON data into a model class.\n <\/p>\n
class User {\n String name;\n int age;\n bool isDeveloper;\n List skills;\n\n User({required this.name, required this.age, required this.isDeveloper, required this.skills});\n\n factory User.fromJson(Map json) {\n return User(\n name: json['name'],\n age: json['age'],\n isDeveloper: json['isDeveloper'],\n skills: List.from(json['skills']),\n );\n }\n}<\/String><\/String><\/code><\/pre>\nUsing the class, you can easily convert JSON data into objects for use.<\/p>\n
5. Displaying JSON Data in Flutter Widgets<\/h2>\n
\n Once the JSON data is fetched, let’s explore how to display that data in Flutter widgets. For example, we can create a widget that displays the user information on the screen.\n <\/p>\n
class UserProfile extends StatelessWidget {\n final User user;\n\n UserProfile({required this.user});\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Text('Name: ${user.name}'),\n Text('Age: ${user.age}'),\n Text('Is Developer: ${user.isDeveloper ? \"Yes\" : \"No\"}'),\n Text('Skills: ${user.skills.join(', ')}'),\n ],\n );\n }\n}<\/code><\/pre>\n6. Exception Handling and Error Management<\/h2>\n
\n Handling errors that may occur during JSON data operations is very important. Let’s look at how to handle exceptions that may arise during HTTP requests or JSON parsing.\n <\/p>\n
Future fetchData() async {\n try {\n final response = await http.get(Uri.parse('https:\/\/api.example.com\/data'));\n if (response.statusCode == 200) {\n \/\/ Successfully fetched JSON data\n var jsonData = json.decode(response.body);\n print(jsonData);\n } else {\n throw Exception('Server error: ${response.statusCode}');\n }\n } catch (e) {\n print('Error occurred: $e');\n }\n}<\/void><\/code><\/pre>\n7. Comparison of JSON and Other Data Formats<\/h2>\n
\n JSON has several advantages and disadvantages when compared to other data formats such as XML and CSV. Here is a comparison between JSON and XML:\n <\/p>\n
\n\nFeature<\/th>\n JSON<\/th>\n XML<\/th>\n<\/tr>\n \nReadability<\/td>\n Excellent<\/td>\n Average<\/td>\n<\/tr>\n \nData Size<\/td>\n Small<\/td>\n Large<\/td>\n<\/tr>\n \nStructure<\/td>\n Key-Value pairs<\/td>\n Tag-based<\/td>\n<\/tr>\n<\/table>\n8. Conclusion<\/h2>\n
\n In this tutorial, we covered the basic methods for handling JSON data in Flutter. By using JSON, we facilitate data management and provide the flexibility to support various required data formats. Based on the experience of using JSON data in practical projects, try to implement more functions.\n <\/p>\n
If you need additional resources, please refer to the official Flutter documentation: Flutter Documentation<\/a>.<\/p>\n