0

I am new in flutter, I had to parse the same JSON response in Android but I don't know to parse JSON in Flutter. As, I am able to print responses in console, But don't know to create a model class.

Below is the function where I can get and print the JSON response.

Future<Null> getHomeData() async {
setState(() {
  loading = true;
});

final response = await http.get(Uri.encodeFull(APIs.url_HomePage));
Map responseMap = jsonDecode(utf8.decode(response.bodyBytes));

var adv_img = responseMap['adv_img'] as List;
var info_text = responseMap['info_text'] as List;
var shop_cat = responseMap['shop_cat'] as List;
var section = responseMap['section'] as List;

print(adv_img);
print(info_text);
print(shop_cat);
print(section);


setState(() {
  loading = false;
  });
}

Here is the link for the JSON file and link for Model Class

Please help me solve the issue. Thank you.

Improve this question

2 Answers 2

Reset to default
1

Check out this example that I have created based on you json data:

json file:

{
    "adv_img": [
      {
        "category_id": "666",
        "image": "localhost://example.com/mobile/ikol/home/banner.jpg?v=6.71",
        "tag": "category"
      }
    ],
    "info_text": [
      {
        "text_head": "FREE DELIVERY AND INSTALLATION",
        "text_sub": " Across All Major Cities"
      },
      {
        "text_head": "GET EXTRA 20% OFF ON ALL PRODUCTS",
        "text_sub": "Use Coupon Code INDIA20"
      },
      {
        "text_head": "LARGE EXPERIENCE STORE NETWORK",
        "text_sub": "20+ Stores Across India"
      }
    ],
    "shop_cat": [
      {
        "category_id": "landing",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/popular-sofas.jpg",
        "category_name": "prodcut_1"
      },
      {
        "category_id": "landing",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/popular-bed.jpg",
        "category_name": "prodcut_2"
      },
      {
        "category_id": "17",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/shop-8.jpg",
        "category_name": "TV prodcut_3"
      },
      {
        "category_id": "29",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/popular-stud.jpg",
        "category_name": "prodcut_4"
      },
      {
        "category_id": "13",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/popular-bed.jpg",
        "category_name": "prodcut_5"
      },
      {
        "category_id": "landing",
        "icon_image": "localhost://example.com/mobile/images-m/aui87/popular.jpg",
        "category_name": "prodcut_6"
      }
    ],
    "section": [
      {
        "banner": [
          {
            "tag": "category",
            "category_id": "666",
            "category_name": "banner_1",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/-store.jpg"
          },
          {
            "tag": "category",
            "category_id": "55",
            "category_name": "banner_2",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/beds.jpg"
          },
          {
            "tag": "category",
            "category_id": "13",
            "category_name": "banner_3",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/beds.jpg"
          }
        ],
        "top_selling": {
          "tag": "Top Selling Products",
          "view_type": 0,
          "traget": 1,
          "data": [
            {
              "product_id": "3842",
              "category_id": "56",
              "name": "top_1",
              "image": "localhost://example.com/mobile/images-m/aui87/size.jpg?",
              "price": "₹ 77,999",
              "special": "₹ 42,499",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "8581",
              "category_id": "299",
              "name": "top_2",
              "image": "localhost://example.com/mobile/images-m/aui87/sofa.jpg",
              "price": "₹ 51,099",
              "special": "₹ 29,989",
              "discount": "",
              "fabricConcept": "1"
            },
            {
              "product_id": "19767",
              "category_id": "545",
              "name": "top_3",
              "image": "localhost://example.com/mobile/images-m/aui87/seater.jpg",
              "price": "₹ 68,999",
              "special": "₹ 41,999",
              "discount": "",
              "fabricConcept": "1"
            },
            {
              "product_id": "17914",
              "category_id": "25",
              "name": "top_4",
              "image": "localhost://example.com/mobile/images-m/aui87/tables.jpg",
              "price": "₹ 34,999",
              "special": "₹ 19,898",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "19476",
              "category_id": "36",
              "name": "top_5",
              "image": "localhost://example.com/mobile/images-m/aui87/chairs.jpg",
              "price": "₹ 32,999",
              "special": "₹ 18,999",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "15657",
              "category_id": "116",
              "name": "top_6",
              "image": "localhost://example.com/mobile/images-m/aui87/divans.jpg",
              "price": "₹ 49,599",
              "special": "₹ 29,989",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "6190",
              "category_id": "56",
              "name": "top_7",
              "image": "localhost://example.com/mobile/images-m/aui87/walken-bed.jpg",
              "price": "₹ 79,999",
              "special": "₹ 42,799",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "16360",
              "category_id": "29",
              "name": "top_8",
              "image": "localhost://example.com/mobile/images-m/aui87/study-table-top.jpg?v=4",
              "price": "₹ 44,999",
              "special": "₹ 24,989",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "18377",
              "category_id": "22",
              "name": "top_9",
              "image": "localhost://example.com/mobile/images-m/aui87/bookshelves.jpg",
              "price": "₹ 33,699 ",
              "special": "₹ 18,499",
              "discount": "null",
              "fabricConcept": "0"
            },
            {
              "product_id": "1929",
              "category_id": "101",
              "name": "top_09",
              "image": "localhost://example.com/mobile/images-m/aui87/drawer.jpg",
              "price": "₹ 37,499",
              "special": "₹ 21,849",
              "discount": "null",
              "fabricConcept": "0"
            }
          ]
        },
        "shop_by": {
          "tag": "Shop By Room",
          "view_type": 1,
          "traget": 0,
          "data": [
            [
              {
                "product_id": "",
                "category_id": "628",
                "name": "room_1",
                "image": "localhost://example.com/images/aui87/shopby-1.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "3",
                "name": "- room_2",
                "image": "localhost://example.com/images/aui87/shopby-2.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "2",
                "name": "- room_3",
                "image": "localhost://example.com/images/aui87/shopby-3.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              }
            ],
            [
              {
                "product_id": "",
                "category_id": "28",
                "name": "- room_4",
                "image": "localhost://example.com/images/aui87/shopby-4.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "155",
                "name": "- room_6",
                "image": "localhost://example.com/images/aui87/shopby-5.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "4",
                "name": "- room_5 ",
                "image": "localhost://example.com/images/aui87/shopby-6.jpg",
                "price": "",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              }
            ]
          ]
        }
      },
      {
        "banner": [
          {
            "tag": "category",
            "category_id": "36",
            "screen": 0,
            "category_name": "banner_1",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/loungechair.png"
          },
          {
            "tag": "category",
            "category_id": "141",
            "screen": 0,
            "category_name": "banner_2",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/diningset.jpg"
          },
          {
            "tag": "category",
            "category_id": "134",
            "screen": 0,
            "category_name": "banner_3",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/coffeetable.jpg"
          },
          {
            "tag": "category",
            "category_id": "",
            "screen": 0,
            "category_name": "banner_4",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/makeinindia.jpg"
          },
          {
            "tag": "category",
            "category_id": "29",
            "screen": 0,
            "category_name": "banner_5",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/study.jpg"
          },
          {
            "tag": "category",
            "category_id": "7",
            "screen": 0,
            "category_name": "banner_6",
            "banner_image": "localhost://example.com/mobile/images-m/aui87/homedecor.png"
          }
        ],
        "top_selling": {
          "tag": "Designs For You",
          "view_type": 0,
          "traget": 1,
          "data": [
            {
              "product_id": "24748",
              "category_id": "29",
              "name": "selling_1",
              "image": "localhost://example.com/mobile/images-m/aui87/-table.jpg",
              "price": "₹ 25,899",
              "special": "₹ 15,999 ",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "24679",
              "category_id": "17",
              "name": "selling_2",
              "image": "localhost://example.com/mobile/images-m/aui87/hatv-unit.jpg",
              "price": "₹ 22,899",
              "special": "₹ 13,499",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "24747",
              "category_id": "19",
              "name": "selling_3",
              "image": "localhost://example.com/mobile/images-m/aui87/-rack.jpg",
              "price": "₹ 16,899",
              "special": "₹ 10,499 ",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "24733",
              "category_id": "25",
              "name": "selling_4",
              "image": "localhost://example.com/mobile/images-m/aui87/ee-table.jpg",
              "price": "₹ 19,899",
              "special": "₹ 11,999",
              "discount": "",
              "fabricConcept": "0"
            },
            {
              "product_id": "24736",
              "category_id": "91",
              "name": "selling_5",
              "image": "localhost://example.com/mobile/images-m/aui87/2-door-.jpg",
              "price": "₹ 33,899",
              "special": "₹ 16,499",
              "discount": "",
              "fabricConcept": "0"
            }
          ]
        },
        "shop_by": {
          "tag": "For Your Home ",
          "view_type": 0,
          "traget": 0,
          "data": [
            [
              {
                "product_id": "",
                "category_id": "151",
                "name": "shop_by_1",
                "image": "localhost://example.com/mobile/images-m/aui87/beds.jpg",
                "price": "From ₹ 24,899",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "43",
                "name": "shop_by_2",
                "image": "localhost://example.com/mobile/images-m/aui87/stools.jpg",
                "price": "From ₹ 7,999 ",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "548",
                "name": "shop_by_3",
                "image": "localhost://example.com/mobile/images-m/aui87/mattress.jpg",
                "price": "From ₹ 9,499 ",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "91",
                "name": "shop_by_4",
                "image": "localhost://example.com/mobile/images-m/aui87/two.jpg",
                "price": "From ₹ 14,899 ",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "12",
                "name": "shop_by_5",
                "image": "localhost://example.com/mobile/images-m/aui87/sofa.jpg",
                "price": "From ₹ 14,879 ",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              },
              {
                "product_id": "",
                "category_id": "53",
                "name": "shop_by_6",
                "image": "localhost://example.com/mobile/images-m/aui87/units.jpg?v=3",
                "price": "From ₹ 14,879 ",
                "special": "",
                "discount": "",
                "fabricConcept": "0"
              }
            ]
          ]
        }
      }
    ],
    "_img": "localhost://example.com/mobile/images-m/aui87/all.jpg?v=3"
  }

model class data:


// To parse this JSON data, do
//
//     final home = homeFromJson(jsonString);

import 'dart:convert';

Home homeFromJson(String str) => Home.fromJson(json.decode(str));

String homeToJson(Home data) => json.encode(data.toJson());

class Home {
    Home({
        this.advImg,
        this.infoText,
        this.shopCat,
        this.section,
        this.img,
    });

    List<AdvImg> advImg;
    List<InfoText> infoText;
    List<ShopCat> shopCat;
    List<Section> section;
    String img;

    factory Home.fromJson(Map<String, dynamic> json) => Home(
        advImg: List<AdvImg>.from(json["adv_img"].map((x) => AdvImg.fromJson(x))),
        infoText: List<InfoText>.from(json["info_text"].map((x) => InfoText.fromJson(x))),
        shopCat: List<ShopCat>.from(json["shop_cat"].map((x) => ShopCat.fromJson(x))),
        section: List<Section>.from(json["section"].map((x) => Section.fromJson(x))),
        img: json["_img"],
    );

    Map<String, dynamic> toJson() => {
        "adv_img": List<dynamic>.from(advImg.map((x) => x.toJson())),
        "info_text": List<dynamic>.from(infoText.map((x) => x.toJson())),
        "shop_cat": List<dynamic>.from(shopCat.map((x) => x.toJson())),
        "section": List<dynamic>.from(section.map((x) => x.toJson())),
        "_img": img,
    };
}

class AdvImg {
    AdvImg({
        this.categoryId,
        this.image,
        this.tag,
    });

    String categoryId;
    String image;
    String tag;

    factory AdvImg.fromJson(Map<String, dynamic> json) => AdvImg(
        categoryId: json["category_id"],
        image: json["image"],
        tag: json["tag"],
    );

    Map<String, dynamic> toJson() => {
        "category_id": categoryId,
        "image": image,
        "tag": tag,
    };
}

class InfoText {
    InfoText({
        this.textHead,
        this.textSub,
    });

    String textHead;
    String textSub;

    factory InfoText.fromJson(Map<String, dynamic> json) => InfoText(
        textHead: json["text_head"],
        textSub: json["text_sub"],
    );

    Map<String, dynamic> toJson() => {
        "text_head": textHead,
        "text_sub": textSub,
    };
}

class Section {
    Section({
        this.banner,
        this.topSelling,
        this.shopBy,
    });

    List<Banner> banner;
    TopSelling topSelling;
    ShopBy shopBy;

    factory Section.fromJson(Map<String, dynamic> json) => Section(
        banner: List<Banner>.from(json["banner"].map((x) => Banner.fromJson(x))),
        topSelling: TopSelling.fromJson(json["top_selling"]),
        shopBy: ShopBy.fromJson(json["shop_by"]),
    );

    Map<String, dynamic> toJson() => {
        "banner": List<dynamic>.from(banner.map((x) => x.toJson())),
        "top_selling": topSelling.toJson(),
        "shop_by": shopBy.toJson(),
    };
}

class Banner {
    Banner({
        this.tag,
        this.categoryId,
        this.categoryName,
        this.bannerImage,
        this.screen,
    });

    String tag;
    String categoryId;
    String categoryName;
    String bannerImage;
    int screen;

    factory Banner.fromJson(Map<String, dynamic> json) => Banner(
        tag: json["tag"],
        categoryId: json["category_id"],
        categoryName: json["category_name"],
        bannerImage: json["banner_image"],
        screen: json["screen"] == null ? null : json["screen"],
    );

    Map<String, dynamic> toJson() => {
        "tag": tag,
        "category_id": categoryId,
        "category_name": categoryName,
        "banner_image": bannerImage,
        "screen": screen == null ? null : screen,
    };
}

class ShopBy {
    ShopBy({
        this.tag,
        this.viewType,
        this.traget,
        this.data,
    });

    String tag;
    int viewType;
    int traget;
    List<List<Datum>> data;

    factory ShopBy.fromJson(Map<String, dynamic> json) => ShopBy(
        tag: json["tag"],
        viewType: json["view_type"],
        traget: json["traget"],
        data: List<List<Datum>>.from(json["data"].map((x) => List<Datum>.from(x.map((x) => Datum.fromJson(x))))),
    );

    Map<String, dynamic> toJson() => {
        "tag": tag,
        "view_type": viewType,
        "traget": traget,
        "data": List<dynamic>.from(data.map((x) => List<dynamic>.from(x.map((x) => x.toJson())))),
    };
}

class Datum {
    Datum({
        this.productId,
        this.categoryId,
        this.name,
        this.image,
        this.price,
        this.special,
        this.discount,
        this.fabricConcept,
    });

    String productId;
    String categoryId;
    String name;
    String image;
    String price;
    String special;
    Discount discount;
    String fabricConcept;

    factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        productId: json["product_id"],
        categoryId: json["category_id"],
        name: json["name"],
        image: json["image"],
        price: json["price"],
        special: json["special"],
        discount: discountValues.map[json["discount"]],
        fabricConcept: json["fabricConcept"],
    );

    Map<String, dynamic> toJson() => {
        "product_id": productId,
        "category_id": categoryId,
        "name": name,
        "image": image,
        "price": price,
        "special": special,
        "discount": discountValues.reverse[discount],
        "fabricConcept": fabricConcept,
    };
}

enum Discount { EMPTY, NULL }

final discountValues = EnumValues({
    "": Discount.EMPTY,
    "null": Discount.NULL
});

class TopSelling {
    TopSelling({
        this.tag,
        this.viewType,
        this.traget,
        this.data,
    });

    String tag;
    int viewType;
    int traget;
    List<Datum> data;

    factory TopSelling.fromJson(Map<String, dynamic> json) => TopSelling(
        tag: json["tag"],
        viewType: json["view_type"],
        traget: json["traget"],
        data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "tag": tag,
        "view_type": viewType,
        "traget": traget,
        "data": List<dynamic>.from(data.map((x) => x.toJson())),
    };
}

class ShopCat {
    ShopCat({
        this.categoryId,
        this.iconImage,
        this.categoryName,
    });

    String categoryId;
    String iconImage;
    String categoryName;

    factory ShopCat.fromJson(Map<String, dynamic> json) => ShopCat(
        categoryId: json["category_id"],
        iconImage: json["icon_image"],
        categoryName: json["category_name"],
    );

    Map<String, dynamic> toJson() => {
        "category_id": categoryId,
        "icon_image": iconImage,
        "category_name": categoryName,
    };
}

class EnumValues<T> {
    Map<String, T> map;
    Map<T, String> reverseMap;

    EnumValues(this.map);

    Map<T, String> get reverse {
        if (reverseMap == null) {
            reverseMap = map.map((k, v) => new MapEntry(v, k));
        }
        return reverseMap;
    }
}

main ui file :

import 'package:flutter/material.dart';
import 'package:json_parsing_example/model2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SampleApp(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SampleApp extends StatefulWidget {
  @override
  _SampleAppState createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> {
  List<AdvImg> advImgList = List();
  List<InfoText> infoTextList = List();
  List<ShopCat> shopCatList = List();
  List<Section> sectionList = List();

  bool _isLoading = false;

  fetchData() async {
    setState(() {
      _isLoading = true;
    });

    String data =
        await DefaultAssetBundle.of(context).loadString("json/parse.json");

    // This is the above where you get the remote data
    // Like var response = await http.get('your url');
    // final home = homeFromJson(response.body);

    final home = homeFromJson(data);

    advImgList = home.advImg;
    infoTextList = home.infoText;
    shopCatList = home.shopCat;
    sectionList = home.section;

    setState(() {
      _isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your heading'),
      ),
      body: Container(
        child: _isLoading
            ? Center(child: CircularProgressIndicator())
            : Column(
                children: <Widget>[
                  ListView.builder(
                      shrinkWrap: true,
                      itemCount: advImgList.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: Text(
                              ' Adv Image List Category Id : ${advImgList[index].categoryId}'),
                        );
                      }),
                  ListView.builder(
                      shrinkWrap: true,
                      itemCount: infoTextList.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: Text(
                              ' Text List : ${infoTextList[index].textSub}'),
                        );
                      }),
                ],
              ),
      ),
    );
  }
}

Check out and let me know if it works.

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

Comments

1

Can try this which has worked for me.

List<YourModel> sampleModel;
var response = await http.get("YourUrl");

sampleModel=(json.decode(response.body) as List).map((i) =>
              YourModel.fromJson(i)).toList();
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.