convert array to be displayed in the list

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?

fadhli-sulaimi · Answer 1 · 2019-06-26T04:27:28.550

0

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()),
],

edited Jun 26 '19 at 04:27

answered Jun 26 '19 at 03:41

fadhli-sulaimi

686
12
17

@OceanL it's a reference to a method i created that returns a widget. It's much more flexible as u need to do more processing on the data before showing it – fadhli-sulaimi Jun 26 '19 at 03:53
The method has to be created before the class build function. – fadhli-sulaimi Jun 26 '19 at 03:53
when I tried an error appeared, like this ` Another exception was thrown: Expected a value of type 'Map', but got one of type 'List' Another exception was thrown: Expected a value of type 'Map', but got one of type 'List' Another exception was thrown: FormatException: SyntaxError: Unexpected token a in JSON at position 2` – OceanL Jun 26 '19 at 04:15
@OceanL what kind of error appeared? do you know how to debug? try putting a breakpoint inside the method. Edited, it seems the data that is being passed is a list? it should be a string. check your snapshot.data value. – fadhli-sulaimi Jun 26 '19 at 04:17
Change the to Map>. My bet, the json has a parent element – fadhli-sulaimi Jun 26 '19 at 04:21
if it is changed then jsonData becomes an error, now the error is another exception was thrown: FormatException: Syntax Error: Unexpected token a in JSON at position 2 – OceanL Jun 26 '19 at 04:25
what is because the data in the database is json, not ordinary data? does that matter??? – OceanL Jun 26 '19 at 04:28
Edited my answer. In regards to your syntax error, look at this thread. https://stackoverflow.com/questions/14432165/uncaught-syntaxerror-unexpected-token-with-json-parse. your data cant be converted to string, json might not be valid. debug and see what is the value of snapshot.data. – fadhli-sulaimi Jun 26 '19 at 04:30
why red jsonDecode (jsonData ['activity']), wow this really makes me dizzy – OceanL Jun 26 '19 at 04:38

Alok · Answer 2 · 2019-06-26T04:40:09.943

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 :)

Well, that is kinda unknown to me. I'm afraid to say that. I have provided a solution to what you have asked for. If you another doubt regarding this API controller, consider asking another question related to that. Thanks — Alok, Jun 26 '19 at 04:41
You're welcome. Let me know if it works for you by upvoting the answer, and marking it as correct. Thanks, and have a good day. — Alok, Jun 26 '19 at 04:45

convert array to be displayed in the list

2 Answers2