How to decode local json list to model objects? - flutter

Question

Flutter newbie here. I am having a hard time trying to decode a local json list to model objects.
I am successful so far with showing what I want to show with something like:
myData[index]['id']
myData[index]['name']
But I would like to use a model object that I already created like:
rule.id
rule.name
And eventually passing the rule object through the onTap event.
This is the code I used to load json: future:DefaultAssetBundle.of(context).loadString('assets/rule.json'),
This is the code inside a FutureBuilder.
var myData = json.decode(snapshot.data);
return ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: ListTile(
leading: Icon(Icons.people),
title: Text(myData[index]['id']),
subtitle: Text(myData[index]['name']),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () => RuleDetailPage.show(context),
),
);
},
itemCount: myData == null ? 0 : myData.length,
);
},
)
);
The fromJson method looks like this:
factory Rule.fromJson(Map json) {
return Rule(
id: json['id'],
name: json['name'],
);
}
}

Answer 1

It looks like you're expecting a list of JSON objects. Just cast the result of decode to a list, and then map each JSON object into a Rule by passing it into your factory.
Like so:
var myData = json.decode(snapshot.data) as List;
List<Rule> rules = list.map((item) {
return Rule.fromJson(item);
}).toList();
return ListView.builder(
itemBuilder: (BuildContext context, int index) {i
Rule currentRule = rules[index];
return Padding(
padding: const EdgeInsets.all(10.0),
child: ListTile(
leading: Icon(Icons.people),
title: Text(currentRule.id),
subtitle: Text(currentRule.name),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () => RuleDetailPage.show(context),
),
);
},
itemCount: myData == null ? 0 : rules.length,
);

Answer 2

I think you are looking for a json parser: https://app.quicktype.io/
This will allow you to create a model class, and then you will be able to call your objects in the way that you suggest.

Answer 3

If I understood your question, you already did most of the job ;-)
json.decode(snapshot.data) return a Json object which can be a Map<String, dynamic> or a List<dynamic> regarding if the root node of your json is an object or an array.
It seems that you already implemented the fromJson factory method which is the way to go except if you want to try a parsing library as mentioned by #code-poet
So just assemble all parts of your code: var rules = Rule.fromJson(json.decode(snapshot.data)); et voilà !
If your snapshot.data contains an array of Rule then as mentioned json.decode returns a list and you must write: json.map((j) => Rule.fromJson(j)).toList();