How can I parse nested JSON using Flutter? - json

Question

I want to parse this JSON data but I have no idea how can I parse it.
{
"kind": "Testing",
"data": {
"modhash": "fffffghhhhhhbf0bb4601d6158db548b5296632215a0",
"dist": 75,
"children": [
{
"kind": "z4",
"data": {
"subreddit": "iOS",
"selftext": "I am iOS developer",
"author_fullname": "tyy_iif5q",
"saved": false,
"gilded": 0,
"clicked": false,
"title": "When is a good time to use docker?",
"subreddit_name_prefixed": "r/webdev",
"hidden": false,
"pwls": 6,
"downs": 0,
"hide_score": false,
"name": "t3_gwqan4",
"quarantine": false,
"link_flair_text_color": "dark",
"upvote_ratio": 0.96,
"subreddit_type": "public",
"ups": 277,
"total_awards_received": 0,
"is_original_content": false,
"is_reddit_media_domain": false,
"is_meta": false,
"can_mod_post": false,
"score": 277,
"author_premium": false,
"thumbnail": "self",
"edited": false,
"is_self": true,
"created": 1591333752,
"link_flair_type": "text",
"wls": 6,
"author_flair_type": "text",
"domain": "self.webdev",
"allow_live_comments": false,
"selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I just finished part 7 of the Full Stack Open course (<a href=\"https://www.fullstackopen.com/en\">www.fullstackopen.com/en</a>) and due to graphQL and typescript not being within the core content of the course, I thought I might try and learn docker. </p>\n\n<p>Turns out, trying to learn docker is just making me even more confused than when I didn&#39;t even know docker existed. </p>\n\n<p>&#x200B;</p>\n\n<p>Could someone explain to me, when is a good time to use docker? How one would go about using docker, and when in someone&#39;s learning path would one ideally learn docker?</p>\n\n<p>&#x200B;</p>\n\n<p>I am still learning react, databases, and overall front-end and back-end web development currently. The most I have done thus-far is hosting an app I made on heroku. I haven&#39;t setup a personal website, portfolio, or hosted an app on an independent website either.</p>\n</div><!-- SC_ON -->",
"archived": false,
"no_follow": false,
"is_crosspostable": true,
"pinned": false,
"over_18": false,
"media_only": false,
"can_gild": true,
"spoiler": false,
"locked": false,
"visited": false,
"subreddit_id": "t5_2qs0q",
"id": "gwqan4",
"is_robot_indexable": true,
"author": "Sensualities",
"num_comments": 127,
"send_replies": true,
"whitelist_status": "all_ads",
"contest_mode": false,
"author_patreon_flair": false,
"permalink": "/r/webdev/comments/gwqan4/when_is_a_good_time_to_use_docker/",
"parent_whitelist_status": "all_ads",
"stickied": false,
"url": "https://www.reddit.com/r/webdev/comments/gwqan4/when_is_a_good_time_to_use_docker/",
"subreddit_subscribers": 487697,
"created_utc": 1591304952,
"num_crossposts": 1,
"is_video": false
}
},
{
"kind": "t3",
"data": {
"subreddit": "iOS",
"selftext": "I am iOS developer",
"author_fullname": "tyy_iif5q",
"saved": false,
"gilded": 0,
"clicked": false,
"title": "When is a good time to use docker?",
"subreddit_name_prefixed": "r/webdev",
"hidden": false,
"pwls": 6,
"downs": 0,
"hide_score": false,
"name": "t3_gwqan4",
"quarantine": false,
"link_flair_text_color": "dark",
"upvote_ratio": 0.96,
"subreddit_type": "public",
"ups": 277,
"total_awards_received": 0,
"is_original_content": false,
"is_reddit_media_domain": false,
"is_meta": false,
"can_mod_post": false,
"score": 277,
"author_premium": false,
"thumbnail": "self",
"edited": false,
"is_self": true,
"created": 1591333752,
"link_flair_type": "text",
"wls": 6,
"author_flair_type": "text",
"domain": "self.webdev",
"allow_live_comments": false,
"selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I just finished part 7 of the Full Stack Open course (<a href=\"https://www.fullstackopen.com/en\">www.fullstackopen.com/en</a>) and due to graphQL and typescript not being within the core content of the course, I thought I might try and learn docker. </p>\n\n<p>Turns out, trying to learn docker is just making me even more confused than when I didn&#39;t even know docker existed. </p>\n\n<p>&#x200B;</p>\n\n<p>Could someone explain to me, when is a good time to use docker? How one would go about using docker, and when in someone&#39;s learning path would one ideally learn docker?</p>\n\n<p>&#x200B;</p>\n\n<p>I am still learning react, databases, and overall front-end and back-end web development currently. The most I have done thus-far is hosting an app I made on heroku. I haven&#39;t setup a personal website, portfolio, or hosted an app on an independent website either.</p>\n</div><!-- SC_ON -->",
"archived": false,
"no_follow": false,
"is_crosspostable": true,
"pinned": false,
"over_18": false,
"media_only": false,
"can_gild": true,
"spoiler": false,
"locked": false,
"visited": false,
"subreddit_id": "t5_2qs0q",
"id": "gwqan4",
"is_robot_indexable": true,
"author": "Sensualities",
"num_comments": 127,
"send_replies": true,
"whitelist_status": "all_ads",
"contest_mode": false,
"author_patreon_flair": false,
"permalink": "/r/webdev/comments/gwqan4/when_is_a_good_time_to_use_docker/",
"parent_whitelist_status": "all_ads",
"stickied": false,
"url": "https://www.reddit.com/r/webdev/comments/gwqan4/when_is_a_good_time_to_use_docker/",
"subreddit_subscribers": 487697,
"created_utc": 1591304952,
"num_crossposts": 1,
"is_video": false
}
}
],
"after": "ggggggg"
}
}
I want to parse this JSON data but I have no idea how can I parse it.I worked with simple json but I have no idea how can I parse nested json please help me. I want to parse this JSON data but I have no idea how can I parse it.I worked with simple json but I have no idea how can I parse nested json please help me.

Answer 1

Take a look at this library, it will help you ;)
https://pub.dev/packages/json_serializable
This lib will generate conversion code fromJson and toJson for each model annotated with #JsonSerializable
It take care of nested objects, type conversion and many other things ;)

Answer 2

Use this link to prepare model class of Json
https://javiercbk.github.io/json_to_dart/
HttpResponse response = callApi;
then after getting response just use json.decode;
then use fromjson Method of your Model generated through link and your whole json is parsed
Map userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);
User is Model created from site

Answer 3

At first you need a classes representing JSON with the method fromJson which parses JSON into your object.
Also you should use nested classes for nested JSON fields
Alternatively, you could generate necessary classes with this class generator
class JSONRepresentation {
final String kind;
final Data data;
JSONRepresentation({this.kind, this.data});
JSONRepresentation .fromJson(Map<String, dynamic> data)
: kind = data['kind'],
data = Data .fromJson(data['data']);
}
class Data {
final String modhash;
final int dist;
//final List<AnotherDataClass> children;
final String after;
Data({this.modhash, this.dist, this.after});
Data .fromJson(Map<String, dynamic> data)
: modhash = data['modhash'],
dist = data['dist'],
after = data['after'];
}
And then you can parse it using dart:convert and get data from objects representing JSON as below
import "dart:convert";
void main() {
var jsonData =
'{"kind": "Testing",
"data": {
"modhash": "fffffghhhhhhbf0bb4601d6158db548b5296632215a0",
"dist": 75,
//"children": [...],
"after": "ggggggg"}}';
var parsedJson = json.decode(jsonData);
var jsonRepresentationObject = JSONRepresentation.fromJson(parsedJson);
//Example of getting data from objects representing JSON
print("kind: "+ jsonRepresentationObject.kind +
"\nData modhash: " + jsonRepresentationObject.data.modhash);
}
You could test my example here - online dart compiler