get data of specific user from rest api in flutter

Question

everyone I have build a rest API which has one to one relationship from parent to child. one parent can have many children.

this could be possible link of endpoint https://example.com/api/child?email=abc@gmail.com and My json result is

{
"data": [
    {
        "id": 1,
        "name": "chi",
        "pin": 123123,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-22T13:27:59.000000Z",
        "updated_at": "2020-12-22T13:27:59.000000Z"
    },
    {
        "id": 2,
        "name": "chi",
        "pin": 123123,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-22T13:30:35.000000Z",
        "updated_at": "2020-12-22T13:30:35.000000Z"
    },
    {
        "id": 5,
        "name": "jazzzz",
        "pin": 12121212,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-22T17:00:07.000000Z",
        "updated_at": "2020-12-22T17:00:07.000000Z"
    },
    {
        "id": 6,
        "name": "jazzzz",
        "pin": 12121212,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-22T17:00:57.000000Z",
        "updated_at": "2020-12-22T17:00:57.000000Z"
    },
    {
        "id": 7,
        "name": "jazzzz",
        "pin": 12121212,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-22T17:01:18.000000Z",
        "updated_at": "2020-12-22T17:01:18.000000Z"
    },
    {
        "id": 8,
        "name": "chi",
        "pin": 123123,
        "parent_id": 1,
        "avatar_id": null,
        "created_at": "2020-12-23T09:05:34.000000Z",
        "updated_at": "2020-12-23T09:05:34.000000Z"
    }
]

}

my model file is

 class ChildModel {
  List<Data> data;

  ChildModel({this.data});

  ChildModel.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = new List<Data>();
      json['data'].forEach((v) {
        data.add(new Data.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.data != null) {
      data['data'] = this.data.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Data {
  int id;
  String name;
  int pin;
  int parentId;
  Null avatarId;
  String createdAt;
  String updatedAt;

  Data(
      {this.id,
      this.name,
      this.pin,
      this.parentId,
      this.avatarId,
      this.createdAt,
      this.updatedAt});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    pin = json['pin'];
    parentId = json['parent_id'];
    avatarId = json['avatar_id'];
    createdAt = json['created_at'];
    updatedAt = json['updated_at'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['pin'] = this.pin;
    data['parent_id'] = this.parentId;
    data['avatar_id'] = this.avatarId;
    data['created_at'] = this.createdAt;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

I want to show all children in listview whose parent_id is 1. I don't Know how to achieve this in a flutter. Anyone help would be highly appreciated.

Answer 1

You should first make api call using http. Then parse json response into list of your model class. Then use ListView or whatever widget you prefer to display the data.

var res = await http.get(API_URL)
var json = jsonDecode(res.body)
var data = json['data'].map((e)=>ChildModel.fromJson(e)).toList()

There is a comprehensive explanation in documentation about how to render data in ListView.

Overall you can create a stateful widget that displays data from the state. It should calls fetchData() method from onCreated() method of state class and then call setState((){}); after data is loaded if the widget is mounted. Although this is not good practice, it is good enough to get started.

Answer 2

I have resolved this by changing model class

   ChildModel childModelFromJson(String str) =>
    ChildModel.fromJson(json.decode(str));

List<ChildModel> childModelListFromJson(String str) => List<ChildModel>.from(
    json.decode(str)["data"].map((x) => ChildModel.fromJson(x)));

String childModelToJson(ChildModel data) => json.encode(data.toJson());