Pick data from a json in flutter with ListView.buider - json

Question

I created this file json, I fetch the data like "displayName" and "age", also i want see on screen the data from the sublist workout. How can I do and if possibile put this data in a profile page?
this is the Json file i make for my little test db:
[
{
"displayName": "mario",
"age": 27,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Running"
},
{
"nomeworkout": "Brucia Grassi"
}
]
},
{
"displayName": "jessica",
"age": 28,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Spinning"
},
{
"nomeworkout": "Gambe"
}
]
},
{
"displayName": "Pedro",
"age": 29,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Potenziamento"
}
]
}
]
with this page, I created a simple ListView.builder to display the list of items such as "displayName", "age", "weight"; but I didn't understand how to get the data from the internal "workout" list:
import 'dart:convert';
import 'package:fitness_app/trainerPage.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List data;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: FutureBuilder(
future:
DefaultAssetBundle.of(context).loadString('assets/jsonDb.json'),
builder: (context, snapshot) {
var data = JsonDecoder().convert(snapshot.data.toString());
return ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => TrainerPage()));
},
child: Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Text(data[index]['displayName']),
Text(data[index]['age'].toString()),
],
),
),
);
},
);
},
),
),
);
}
}

Answer 1

simple future loader json
Future loadJson()async =>
[
{
"displayName": "mario",
"age": 27,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Running"
},
{
"nomeworkout": "Brucia Grassi"
}
]
},
{
"displayName": "jessica",
"age": 28,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Spinning"
},
{
"nomeworkout": "Gambe"
}
]
},
{
"displayName": "Pedro",
"age": 29,
"peso": 85,
"altezza": 175,
"workout": [
{
"nomeworkout": "Potenziamento"
}
]
}
];
simple view
class ContohLoadJson extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: loadJson(),
builder: (context, snapshot){
List data = snapshot.data??[];
return data.isEmpty?Center(child: CircularProgressIndicator(),):
ListView(
children: List.generate(data.length, (index) =>
Card(
child: Container(
padding: EdgeInsets.all(8),
child: Column(
children: [
Row(
children: [
Text("Name : "),
Text(data[index]['displayName'])
],
),
Row(
children: [
Text("Age : "),
Text(data[index]['age'].toString())
],
),
Row(
children: [
Text("Peso : "),
Text(data[index]['peso'].toString())
],
),
Row(
children: [
Text("altezza: "),
Text(data[index]['altezza'].toString())
],
),
Column(
children: List.generate(data[index]['workout'].length, (index2) =>
Card(
child: Container(
padding: EdgeInsets.all(8),
child: Column(
children: [
Row(
children: [
Text("nomeworkout : "),
Text(data[index]['workout'][index2]['nomeworkout'])
],
)
],
),
),
)
).toList(),
)
],
),
),
)
).toList(),
);
},
)
);
}
}

Answer 2

you can extract the list like
var workouts = data[index]['workouts']
then iterate through that list to and render your views