Question 74916 in Flutter Question posted in
The official Flutter documentation can be found here.

how to access json array in FutureBuilder in flutter

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);
}
Tags:

2

Answers


  1. 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
}
});
    Login or Signup to reply.
  2. 0

    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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search