How to Fetch Complex Data from Api in Flutter using Http Or Dio

Question

Hello Guys i really need some help here my brain blow

i have Complex Nested Json Data need to bee Fetch from api i tried to use quicktype which made my model but every time i try to get the data it gives me this error

Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'

Here is my Json Structure

{
"success": true,
"data": {
    "sliders": [
        {
            "id": 4,
            "title": "ترس 3",
            "text": null,
            "link": null,
            "image": "https://trscar.com/uploads/slider/1639729426.gif"
        }
    ],
    "latest_spar_part": [
        {
            "id": 2269,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه تويوتا كورولا 1300",
            "price": 1148,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2269/1_1640198733.jpeg"
        },
        {
            "id": 2268,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه دايو و شيفروليه لانوس",
            "price": 1013,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2268/1_1640197396.jpeg"
        },
        {
            "id": 2267,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج دايو نوبيرا",
            "price": 527,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2267/1_1640197240.jpeg"
        },
        {
            "id": 2266,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج عربيه ميتسوبيشي لانسر بوما",
            "price": 506,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2266/1_1640196511.jpeg"
        },
        {
            "id": 2265,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه كيا سيفيا",
            "price": 1215,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2265/1_1640194197.jpeg"
        }
    ],
    "latest_cars": [
        {
            "id": 2296,
            "merchant": 58,
            "payed": 2,
            "title": "هيونداي كريتا11",
            "price": 285000,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2296/1_1645113413."
        }
    ],
    "img_offer": "https://trscar.com/uploads/setting/1637758178.png",
    "cats": [
        {
            "id": 2,
            "title": "اطــــــارات",
            "image": "https://trscar.com/uploads/categories/1638446679.png"
        },
        {
            "id": 5,
            "title": "زيوت و سوائل",
            "image": "https://trscar.com/uploads/categories/1638446688.png"
        },
        {
            "id": 6,
            "title": "هياكـــل",
            "image": "https://trscar.com/uploads/categories/1638446698.png"
        },
        {
            "id": 7,
            "title": "ميكانيكا",
            "image": "https://trscar.com/uploads/categories/1638446713.png"
        },
        {
            "id": 8,
            "title": "اكسسوارات",
            "image": "https://trscar.com/uploads/categories/1638446722.png"
        },
        {
            "id": 9,
            "title": "عفشه",
            "image": "https://trscar.com/uploads/categories/1638446734.png"
        },
        {
            "id": 10,
            "title": "كهرباء",
            "image": "https://trscar.com/uploads/categories/1638446742.png"
        },
        {
            "id": 11,
            "title": "بطاريات",
            "image": "https://trscar.com/uploads/categories/1638446762.png"
        },
        {
            "id": 12,
            "title": "فلاتر",
            "image": "https://trscar.com/uploads/categories/1638446750.png"
        },
        {
            "id": 13,
            "title": "فرامل",
            "image": "https://trscar.com/uploads/categories/1638446789.png"
        },
        {
            "id": 16,
            "title": "قطع الغيار",
            "image": "https://trscar.com/uploads/categories/1641893130.jpg"
        },
        {
            "id": 17,
            "title": "السيارات",
            "image": "https://trscar.com/uploads/categories/1641893157.jpg"
        }
    ],
    "latest_products": [
        {
            "id": 2296,
            "merchant": 58,
            "payed": 2,
            "title": "هيونداي كريتا11",
            "price": 285000,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2296/1_1645113413."
        },
        {
            "id": 2271,
            "merchant": 38,
            "payed": 2,
            "title": "فرامل",
            "price": 300,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2271/1_1641392298.png"
        },
        {
            "id": 2269,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه تويوتا كورولا 1300",
            "price": 1148,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2269/1_1640198733.jpeg"
        },
        {
            "id": 2268,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه دايو و شيفروليه لانوس",
            "price": 1013,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2268/1_1640197396.jpeg"
        },
        {
            "id": 2267,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج دايو نوبيرا",
            "price": 527,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2267/1_1640197240.jpeg"
        },
        {
            "id": 2266,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج عربيه ميتسوبيشي لانسر بوما",
            "price": 506,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2266/1_1640196511.jpeg"
        },
        {
            "id": 2265,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه كيا سيفيا",
            "price": 1215,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2265/1_1640194197.jpeg"
        },
        {
            "id": 2264,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه شيفروليه اوبترا",
            "price": 1991,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2264/1_1640194007.jpeg"
        },
        {
            "id": 2263,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه شيفروليه سبارك",
            "price": 1215,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2263/1_1640193872.jpeg"
        },
        {
            "id": 2262,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه كيا برايد",
            "price": 1080,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2262/1_1640193664.jpeg"
        },
        {
            "id": 2261,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه سوزوكي ماروتي",
            "price": 1148,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2261/1_1640193540.jpeg"
        },
        {
            "id": 2260,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه سوزوكي فان نقل وتمنايه",
            "price": 911,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2260/1_1640193233.jpeg"
        },
        {
            "id": 2259,
            "merchant": 0,
            "payed": 2,
            "title": "اسطوانه دبرياج تويوتا ميكروباص ماكينه 2L",
            "price": 608,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2259/1_1640193079.jpeg"
        },
        {
            "id": 2258,
            "merchant": 0,
            "payed": 2,
            "title": "اسطوانه دبرياج تويوتا داينا",
            "price": 1013,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2258/1_1640192930.jpeg"
        },
        {
            "id": 2257,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه وبليه دبرياج دايو جوليت",
            "price": 1215,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2257/1_1640192788.jpeg"
        },
        {
            "id": 2256,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج شيفروليه NKR ثلث نقل",
            "price": 1148,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2256/1_1640192604.jpeg"
        }
    ],
    "pro_more_arr": [
        {
            "id": 2269,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه تويوتا كورولا 1300",
            "price": 1148,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2269/1_1640198733.jpeg"
        },
        {
            "id": 2268,
            "merchant": 0,
            "payed": 2,
            "title": "طقم دبرياج ديسك واسطوانه دايو و شيفروليه لانوس",
            "price": 1013,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2268/1_1640197396.jpeg"
        },
        {
            "id": 2267,
            "merchant": 0,
            "payed": 2,
            "title": "ديسك دبرياج دايو نوبيرا",
            "price": 527,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/2267/1_1640197240.jpeg"
        },
        {
            "id": 784,
            "merchant": 0,
            "payed": 2,
            "title": "فلتر هواء شيفرولية كروز",
            "price": 115,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/784/1_1635592243.jpeg"
        },
        {
            "id": 310,
            "merchant": 0,
            "payed": 2,
            "title": "طقم تيل فرامل امامي هيونداي النترا XD",
            "price": 297,
            "favorite": false,
            "image": "https://trscar.com/uploads/products/310/1_1634376815.jpeg"
        }
    ]
},
"message": "Success",
"code": 200}

Model Class that Quicktype Generated

//     final homeItems = homeItemsFromJson(jsonString);

import 'dart:convert';

HomeItems homeItemsFromJson(String str) => HomeItems.fromJson(json.decode(str));

String homeItemsToJson(HomeItems data) => json.encode(data.toJson());

class HomeItems {
  HomeItems({
    required this.success,
    required this.data,
    required this.message,
    required this.code,
  });

  bool success;
  DataItems data;
  String message;
  int code;

  factory HomeItems.fromJson(Map<String, dynamic> json) => HomeItems(
        success: json["success"],
        data: DataItems.fromJson(json["data"]),
        message: json["message"],
        code: json["code"],
      );

  Map<String, dynamic> toJson() => {
        "success": success,
        "data": data.toJson(),
        "message": message,
        "code": code,
      };
}

class DataItems {
  DataItems({
    required this.sliders,
    required this.latestSparPart,
    required this.latestCars,
    required this.imgOffer,
    required this.cats,
    required this.latestProducts,
    required this.proMoreArr,
  });

  List<Slider> sliders;
  List<LatestCar> latestSparPart;
  List<LatestCar> latestCars;
  String imgOffer;
  List<Cat> cats;
  List<LatestCar> latestProducts;
  List<LatestCar> proMoreArr;

  factory DataItems.fromJson(Map<String, dynamic> json) => DataItems(
        sliders:
            List<Slider>.from(json["sliders"].map((x) => Slider.fromJson(x))),
        latestSparPart: List<LatestCar>.from(
            json["latest_spar_part"].map((x) => LatestCar.fromJson(x))),
        latestCars: List<LatestCar>.from(
            json["latest_cars"].map((x) => LatestCar.fromJson(x))),
        imgOffer: json["img_offer"],
        cats: List<Cat>.from(json["cats"].map((x) => Cat.fromJson(x))),
        latestProducts: List<LatestCar>.from(
            json["latest_products"].map((x) => LatestCar.fromJson(x))),
        proMoreArr: List<LatestCar>.from(
            json["pro_more_arr"].map((x) => LatestCar.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "sliders": List<dynamic>.from(sliders.map((x) => x.toJson())),
        "latest_spar_part":
            List<dynamic>.from(latestSparPart.map((x) => x.toJson())),
        "latest_cars": List<dynamic>.from(latestCars.map((x) => x.toJson())),
        "img_offer": imgOffer,
        "cats": List<dynamic>.from(cats.map((x) => x.toJson())),
        "latest_products":
            List<dynamic>.from(latestProducts.map((x) => x.toJson())),
        "pro_more_arr": List<dynamic>.from(proMoreArr.map((x) => x.toJson())),
      };
}

class Cat {
  Cat({
    required this.id,
    required this.title,
    required this.image,
  });

  int id;
  String title;
  String image;

  factory Cat.fromJson(Map<String, dynamic> json) => Cat(
        id: json["id"],
        title: json["title"],
        image: json["image"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "title": title,
        "image": image,
      };
}

class LatestCar {
  LatestCar({
    required this.id,
    required this.merchant,
    required this.payed,
    required this.title,
    required this.price,
    required this.favorite,
    required this.image,
  });

  int id;
  int merchant;
  int payed;
  String title;
  int price;
  bool favorite;
  String image;

  factory LatestCar.fromJson(Map<String, dynamic> json) => LatestCar(
        id: json["id"],
        merchant: json["merchant"],
        payed: json["payed"],
        title: json["title"],
        price: json["price"],
        favorite: json["favorite"],
        image: json["image"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "merchant": merchant,
        "payed": payed,
        "title": title,
        "price": price,
        "favorite": favorite,
        "image": image,
      };
}

class Slider {
  Slider({
    required this.id,
    required this.title,
    required this.text,
    required this.link,
    required this.image,
  });

  int id;
  String title;
  dynamic text;
  dynamic link;
  String image;

  factory Slider.fromJson(Map<String, dynamic> json) => Slider(
        id: json["id"],
        title: json["title"],
        text: json["text"],
        link: json["link"],
        image: json["image"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "title": title,
        "text": text,
        "link": link,
        "image": image,
      };
}

Here is the Code which i Fetch the data with

Future<HomeItems> getProducts() async {
  var options = Options(
    headers: {
      'Accept': 'application/json',
      'x-api-key': 'mwDA9w',
      'Content-Language': 'ar',
      'Content-Country': 1,
      'Authorization': 'Bearer $bearerToken',
    },
    contentType: 'application/json',
  );
  var response = await Dio().get('$baseUrl/home', options: options);
  return homeItemsFromJson(response.data);
}

I appreciate really your time to help me

Hi, the factory method is wrong, try with HomeItems.fromJson(response.data). Dio return decoded MAP. not required to decode. see stackoverflow.com/questions/54366431/dio-response-decode-issue — Diego
– Diego, Commented Jun 18, 2022 at 15:47

Hardik Mehta · Accepted Answer · 2022-06-19 05:00:12Z

1

You can use http as well. [https://pub.dev/packages/http]

Parse your json response to model class using this: https://javiercbk.github.io/json_to_dart/

Sample http call:

Future<HomeItems> getProducts() async {
  var headers = {
      'Accept': 'application/json',
      'x-api-key': 'mwDA9w',
      'Content-Language': 'ar',
      'Content-Country': 1,
      'Authorization': 'Bearer $bearerToken',
       contentType: 'application/json',
    };

  var response = await http.get( Uri.parse('$baseUrl/home'), headers: headers );
HomeItems homeItems=
          HomeItems.fromJson(json.decode(utf8.decode(response.bodyBytes)));
  return homeItems;
}

answered Jun 19, 2022 at 5:00

Hardik Mehta

2,4731 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Fetch Complex Data from Api in Flutter using Http Or Dio

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related