convert array to be displayed in the list - arrays

Question

I tried to display the output of this data into a list but it can't
this is my data output
{activity: {"project":" Distributions","code":2000,"code_name":"OpenProcessSnapshot","activity":{"id_process_snapshot":988,"name":"Android Process"}}, created_at: 2019-06-20 08:58:48.492885+07, id: 1, id_user: 1}
{activity: {"project":"Distributions","code":2000,"code_name":"OpenProcessSnapshot","activity":{"id_process_snapshot":988,"name":"Android Process"}}, created_at: 2019-06-20 08:58:48.492885+07, id: 1, id_user: 1}
{activity: {"project":" Distributions","code":2000,"code_name":"OpenProcessSnapshot","activity":{"id_process_snapshot":988,"name":"Android Process"}}, created_at: 2019-06-20 08:58:48.492885+07, id: 1, id_user: 1}
and this is my code
FutureBuilder(
future: UserController.getActivity(_selectedUser),
builder: (context, snapshot) {
if (snapshot.hasData) {
print(snapshot.data.toString());
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(snapshot.data.toString()),
],
);
} else {
return Center(
child: Text("No data displayed"),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
what if I want to display created_at and project?

Answer 1

You can use jsonDecode to get that specific element.
Documentation Link
For your case you have to create a new widget function and return it:
//put this method before your widget build function
Widget _mapJsonDataToText(String data){
Map<String, List<dynamic>> jsonData = jsonDecode(data);
Map<String, dynamic> jsonDataInner = jsonDecode(jsonData['activity']);
return Text(jsonDataInner['created_at']);
//do the same for project
}
children: <Widget>[
//gets the method that returns the text widget
_mapJsonDataToText(snapshot.data.toString()),
],

Answer 2

I have a different method, this will add up the data into the list. Not using future builder, just making use of my common sense to display the data logically into the list.
Assuming you know about http of flutter, if you don't then this is the link for you: Fetch data from the internet
Suppose you have a data[], in which activity{} are being displayed in your JSON output.
List<String> project = [];
List<String> createdAt = [];
void initState(){
super.initState();
//this will run this method on call of this page, everytime
this.fetchData();
}
Future<void> fetchData() async{
List<String> _project = [];
List<String> _createdAt = [];
final response =
await http.get('your_api_url');
//looping through the array of activity object
(response['data'] as list).forEach((item){
//check if the data comes correct
print(item['activity']['project']);
print(item['created_at']);
_project.add(item['activity']['project']);
_createdAt.add(item['created_at']);
});
setState((){
this.project = _project;
this.createdAt = _createdAt;
});
}
//In order to show them in the list of project, call ListView()
List<Widget> projectWidget(){
List<Widget> _widget = [];
this.project.forEach((item){
_widget.add(item);
});
return _widget;
}
//In order to show them in the list of createdAt, call ListView()
List<Widget> createdAtWidget(){
List<Widget> _anotherWidget = [];
this.createdAt.forEach((item){
_anotherWidget.add(item);
});
return _anotherWidget;
}
Display the data as you want in your UI. Let me if it works for you. Thanks :)