I'm trying to Integrate the API using model. Let say I have a book screen, so I'm trying to get its API data using model. my model looks like this.

class Book {
  final int id;
  final String phone;
  final String name;
  final String relation;
  final String updated_at;
  final String created_at;
  final int userId;
  

  Book(
      {required this.id,
      required this.name,
      required this.phone,
      required this.relation,
      required this.created_at,
      // required this.image,
      required this.updated_at,
      required this.userId,
      
      });

  factory Book.fromJson(Map<String, dynamic> json) => Book(
        id: json['user_id'],
        name: json['contact_person'],
        relation: json['relation'],
        phone: json['phone'],

        updated_at: json['updated_at'],
        created_at: json['created_at'],
        userId: json['id']

      );

  Map<String, dynamic> toJson() => {
        'user_id': userId,
        'contact_person': phone,
        'relation': relation,
        'name': name,
        'created_at':created_at,
        'updated_at':updated_at,
        'id':id,
        
      };
}

calling this api like this

 Future<List<Book>> getBook() async {
     List<Book> _bookList =[];
   
    Map<String, String> headers = {
      "Content-type": "application/json",
      'Authorization': 'Bearer $token',
    };
      var url = Uri.parse(ApiPath.getAllEmergenceyContactUrl);
      final response = await http.get(url, headers: headers);
    if (response.statusCode == 200) {
    
     Map<String, dynamic> map = json.decode(response.body);
     List<dynamic> data = map["user"];
      if(data.length>0){
        for(int i=0;i<data.length;i  ){
          if(data[i]!=null){
            Map<String,dynamic> map=data[i];
            _bookList.add(Book.fromJson(map));
            debugPrint('Id-------${map['contact_person']}');  //this print the correct data
          }
        }
      }
      print(_bookList);
      return _bookList;

    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
}

print(_bookList); this give me this output [Instance of 'Book', Instance of 'Book']

and calling in User Interface like this

 List<Book> books = [];
getAllEmergenceyContacts()async{
      var books = await services.getBook();
      
  }
  

i can't able to get the the when using the books in listview builder, please help me out.

my json data look like this

{
    "status": 1,
    "message": "your emergency contacts",
    "user": [
        {
            "id": 10,
            "user_id": 49,
            "contact_person": "ABC",
            "relation": "DSVKJDSB",
            "phone": "sdfsdf",
            "image": "emergency/1735686398652391.png",
            "created_at": "2022-06-15T07:52:19.000000Z",
            "updated_at": "2022-06-15T07:52:19.000000Z"
        },
]}

and i want user array data from it.

CodePudding user response：

I optimized your code and fix your problem. You can try it and tell me if have any problem

Model

import 'dart:convert';

Book bookFromJson(String str) => Book.fromJson(json.decode(str));

String bookToJson(Book data) => json.encode(data.toJson());

class Book {
    Book({
        this.status,
        this.message,
        this.user,
    });

    int status;
    String message;
    List<User> user;

    factory Book.fromJson(Map<String, dynamic> json) => Book(
        status: json["status"],
        message: json["message"],
        user: List<User>.from(json["user"].map((x) => User.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "status": status,
        "message": message,
        "user": List<dynamic>.from(user.map((x) => x.toJson())),
    };
}

class User {
    User({
        this.id,
        this.userId,
        this.contactPerson,
        this.relation,
        this.phone,
        this.image,
        this.createdAt,
        this.updatedAt,
    });

    int id;
    int userId;
    String contactPerson;
    String relation;
    String phone;
    String image;
    DateTime createdAt;
    DateTime updatedAt;

    factory User.fromJson(Map<String, dynamic> json) => User(
        id: json["id"],
        userId: json["user_id"],
        contactPerson: json["contact_person"],
        relation: json["relation"],
        phone: json["phone"],
        image: json["image"],
        createdAt: DateTime.parse(json["created_at"]),
        updatedAt: DateTime.parse(json["updated_at"]),
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "user_id": userId,
        "contact_person": contactPerson,
        "relation": relation,
        "phone": phone,
        "image": image,
        "created_at": createdAt.toIso8601String(),
        "updated_at": updatedAt.toIso8601String(),
    };
}

Call API

Future getBook() async {
   
    Map<String, String> headers = {
      "Content-type": "application/json",
      'Authorization': 'Bearer $token',
    };

      var url = Uri.parse(ApiPath.getAllEmergenceyContactUrl);

      final response = await http.get(url, headers: headers);

    if (response.statusCode == 200) {
   
    return bookFromJson(response.body).user;

    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
}

Calling in ui screen

List<Book> books = [];
getAllEmergenceyContacts()async{
      books = await services.getBook();
      setState((){});
  }

Listview builder

 ListView.builder(
          itemCount: books.length,
          itemBuilder: (context, index) {
             return ListTile(
             title: Text(books[index].name),
             );
          },
    ),

CodePudding user response：

print(_bookList); this gives you this output [Instance of 'Book', Instance of 'Book'] because you try to print every Book class instance
You declare List<Book> _bookList =[]; , where _bookList holds Book Class as a child.

At first, Fetch the books from API

 List<Book> books = [];
getAllEmergenceyContacts()async{
      var books = await services.getBook();
      
  }

Then, you Should place all the books inside List view builder like the following way

ListView.builder(
      itemCount: books.length,
      itemBuilder: (context, index) {
         return ListTile(
         title: Text(books[index].name),
         );
      },
),