Displaying selected values from JSON in flutter - json

Question

I want to display only the units with univ_spec_sub_id as 53 from the JSON returned into a Listview. I have tried implementing some code but it doesn't work. Is there any other way i can get the desired output?
This is the JSON being returned after hitting an URL :
"unit": [
{
"unit_id": "268",
"univ_spec_sub_id": "53",
"no_chapters": "13",
"unit_name": "File Handling and Dictionaries",
},
{
"unit_id": "300",
"univ_spec_sub_id": "53",
"no_chapters": "14",
"unit_name": "Decision Control Statements",
},
{
"unit_id": "298",
"univ_spec_sub_id": "59",
"no_chapters": "16",
"unit_name": "Electromagnetism",
},
{
"unit_id": "299",
"univ_spec_sub_id": "59",
"no_chapters": "0",
"unit_name": "Coming Soon",
},
This is the code i implemented.In this i have passed the unit JSON array as list and the univ_spec_sub_id using constructor:
checkid(int index){
if(widget.data[index]["univ_spec_sub_id"]== widget.univ_sub){
articles(index);
}
}
Container articles(int index){
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Container(
child: Text(widget.data[index]["unit_no"]),
padding: const EdgeInsets.all(20),
),
),
onTap: (){
print(widget.univ_sub);
},)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[700],
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: (){
Navigator.pop(context);
},
),
),
),
SizedBox(height: 10,),
Text('Programming and ',
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
Text(' Problem Solving (IT) ',
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(height: 40,),
Container(
height: MediaQuery.of(context).size.height - 185,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
child: Expanded(
child: ListView.builder(
itemCount: widget.data.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: checkid(index),
);
}),
),
),
)
],
),
);

Answer 1

Just check out the example that I have created.
json that you have given : Just validated from my side
{
"unit": [{
"unit_id": "268",
"univ_spec_sub_id": "53",
"no_chapters": "13",
"unit_name": "File Handling and Dictionaries"
},
{
"unit_id": "300",
"univ_spec_sub_id": "53",
"no_chapters": "14",
"unit_name": "Decision Control Statements"
},
{
"unit_id": "298",
"univ_spec_sub_id": "59",
"no_chapters": "16",
"unit_name": "Electromagnetism"
},
{
"unit_id": "299",
"univ_spec_sub_id": "59",
"no_chapters": "0",
"unit_name": "Coming Soon"
}
]
}
This is t the model class for the json
// To parse this JSON data, do
//
// final unit = unitFromJson(jsonString);
import 'dart:convert';
Unit unitFromJson(String str) => Unit.fromJson(json.decode(str));
String unitToJson(Unit data) => json.encode(data.toJson());
class Unit {
Unit({
this.unit,
});
List<UnitElement> unit;
factory Unit.fromJson(Map<String, dynamic> json) => Unit(
unit: List<UnitElement>.from(json["unit"].map((x) => UnitElement.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"unit": List<dynamic>.from(unit.map((x) => x.toJson())),
};
}
class UnitElement {
UnitElement({
this.unitId,
this.univSpecSubId,
this.noChapters,
this.unitName,
});
String unitId;
String univSpecSubId;
String noChapters;
String unitName;
factory UnitElement.fromJson(Map<String, dynamic> json) => UnitElement(
unitId: json["unit_id"],
univSpecSubId: json["univ_spec_sub_id"],
noChapters: json["no_chapters"],
unitName: json["unit_name"],
);
Map<String, dynamic> toJson() => {
"unit_id": unitId,
"univ_spec_sub_id": univSpecSubId,
"no_chapters": noChapters,
"unit_name": unitName,
};
}
This is the main ui for it :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_parsing_example/models.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.amber),
home: FirstPage(),
);
}
}
class FirstPage extends StatefulWidget {
#override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
List<UnitElement> unitList = List();
#override
void initState() {
super.initState();
loadData();
}
Future<String> loadFromAssets() async {
return await rootBundle.loadString('json/parse.json');
}
loadData() async {
String jsonString = await loadFromAssets();
final unit = unitFromJson(jsonString);
unitList = unit.unit;
}
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text('Second'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(
data: unitList,
univ_sub: "53",// This 53 is hardcoded you can add as per //your code
),
),
);
},
),
);
}
}
class SecondPage extends StatefulWidget {
final String univ_sub;
final List<UnitElement> data;
const SecondPage({Key key, this.univ_sub, this.data}) : super(key: key);
#override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
Widget checkid(int index) {
if (widget.data[index].univSpecSubId == widget.univ_sub) {
return articles(index);
}
}
Container articles(int index) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Container(
child: Text(widget.data[index].unitId),
padding: const EdgeInsets.all(20),
),
),
onTap: () {
print(widget.univ_sub);
},
)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[700],
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(
height: 10,
),
Text(
'Programming and ',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
Text(
' Problem Solving (IT) ',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 40,
),
Container(
height: MediaQuery.of(context).size.height - 185,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0)),
),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: checkid(index),
);
}),
),
)
],
),
);
}
}
Just check it out and let me know if it works.