how to access json array in FutureBuilder in flutter

Question

I have created my model class and through Dio I store and display the server information in my class but my problem is that I want to access the jsonarray of chart fields json object and display them in FutureBuilder app response.

[
   {
      "id":"1",
      "name":"arthor",
      "chart":[
         {
            "a":"allow",
            "b":"23",
            "c":"256523"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256522"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256525"
         }
      ]
   }
]

My class model:

class Chart {
  String? id;
  String? name;
  List<Chart>? chart;
  Chart({this.id, this.name, this.chart});
  Chart.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    if (json['chart'] != null) {
      chart = <Chart>[];
      json['chart'].forEach((v) {
        chart!.add(new Chart.fromJson(v));
      });
    }
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    if (this.chart != null) {
      data['chart'] = this.chart!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Chart {
  String? a;
  String? b;
  String? c;
  Chart({this.a, this.b, this.c});
  Chart.fromJson(Map<String, dynamic> json) {
    a = json['a'];
    b = json['b'];
    c = json['c'];
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['a'] = this.a;
    data['b'] = this.b;
    data['c'] = this.c;
    return data;
  }

  static List<Chart> fromJsonList(List<dynamic> jsonlList) {
    return jsonlList
        .map((e) => Chart.fromJson(e as Map<String, dynamic>))
        .toList();
  }
}

My Future method API:

Future<List<Chart>> getCategory() async {
  String link = "xxxxxxx";
  var response = await Dio().get(link + id.toString());
  return Rate.fromJsonList(response.data);
}

Amirali Eric Janani · Accepted Answer · 2023-04-13T08:41:08.003

Artin Jan, here is an example of your need:

FutureBuilder<List<Chart>>(
  future: getCategory(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final chartList = snapshot.data![0].chart!;
      return ListView.builder(
        itemCount: chartList.length,
        itemBuilder: (context, index) {
          final chart = chartList[index];
          return Column(
            children: [
              Text(chart.a!),
              Text(chart.b!),
              Text(chart.c!),
            ],
          );
        },
      );
    } else {
      return CircularProgressIndicator();
    }
  },
);

if it didn't help please let me know and share more detail.

EDIT:

According to your Map :

[
   {
      "id":"1",
      "name":"arthor",
      "chart":[
         {
            "a":"allow",
            "b":"23",
            "c":"256523"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256522"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256525"
         }
      ]
   }
]

It won't be correct if you say snapshot.data![index].chart! because snapshot.data![0].chart! is the only item of snapshot.data and you don't have another items. now final chartList = snapshot.data![0].chart! is

[
         {
            "a":"allow",
            "b":"23",
            "c":"256523"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256522"
         },
         {
            "a":"allow",
            "b":"23",
            "c":"256525"
         }
      ]

and

 chartList[0] => is => {
                "a":"allow",
                "b":"23",
                "c":"256523"
             }


 chartList[1] => is => {
            "a":"allow",
            "b":"23",
            "c":"256522"
         }



chartList[2] => is => {
            "a":"allow",
            "b":"23",
            "c":"256525"
         }

If you use the recommended code with the map structure that you've provided, you won't have any problem.

happy coding...

`final chartList = snapshot.data![index].chart!; final chart = chartList[index]; print(chart.chTimestamp!);` Thank you, the problem I have now is that it only displays the first data of the arraylist-chart — Artin Yunesi, Apr 13 '23 at 08:19
`if (snapshot.hasData) { final chartList = snapshot.data![0].chart!; return ListView.builder( scrollDirection: Axis.horizontal, itemCount: snapshot.data!.length, itemBuilder: (context, index) { final chart = chartList[index]; var a = chart.a.toString(); var b = a + " - " + chart.b.toString(); print(b);` The problem now is that it only displays the item from the chart list when there are more ! — Artin Yunesi, Apr 13 '23 at 09:07
I want to store the data of field "a" in arraylist "chart" in a list and display it in my chart — Artin Yunesi, Apr 13 '23 at 09:33
do you have discord(my id => Eric J#0036)? if you don't tell me to connect in meet to see what is your exact problem. — Amirali Eric Janani, Apr 13 '23 at 09:51

score 0 · Answer 2 · answered Apr 12 '23 at 14:31

0

FutureBuilder<List<Chart>>(future:getCategory(),builder((context,snapshot){
if(snapshot.hasData){
// your data has arrived, show UI accordingly
}
else if (snapshot.hasError){
//error
}
else {
//loading
}
});

answered Apr 12 '23 at 14:31

Rishan Shrestha

61
3

bro how to show chart json array in ui ? – Artin Yunesi Apr 12 '23 at 14:45
Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Apr 14 '23 at 00:07

how to access json array in FutureBuilder in flutter

2 Answers2