我如何获取嵌套的 json 数据

Question

#我能够获取 id 名称地址，但我无法获取图像，它是图像内部的 src 需要帮助 #这是我的模型class

class CategoryModel with ChangeNotifier{
  CategoryModel({
    this.id,
    this.name,
    this.slug,
    this.parent,
    this.description,
    this.display,
    this.image,
    this.menuOrder,
    this.count,
    this.yoastHead,
    this.yoastHeadJson,
    this.links,
  });

  int? id;
  String? name;
  String? slug;
  int? parent;
  String? description;
  String? display;
  Image? image;
  int? menuOrder;
  int? count;
  String? yoastHead;
  YoastHeadJson? yoastHeadJson;
  Links? links;

  factory CategoryModel.fromJson(Map<String, dynamic> json) => CategoryModel(
    id: json["id"],
    name: json["name"],
    slug: json["slug"],
    parent: json["parent"],
    description: json["description"],
    display: json["display"],
    image: json["image"] == null ? null : Image.fromJson(json["image"]),
    menuOrder: json["menu_order"],
    count: json["count"],
    yoastHead: json["yoast_head"],
    yoastHeadJson: YoastHeadJson.fromJson(json["yoast_head_json"]),
    links: Links.fromJson(json["_links"]),
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "name": name,
    "slug": slug,
    "parent": parent,
    "description": description,
    "display": display,
    "image": image == null ? null : image!.toJson(),
    "menu_order": menuOrder,
    "count": count,
    "yoast_head": yoastHead,
    "yoast_head_json": yoastHeadJson!.toJson(),
    "_links": links!.toJson(),
  };
}

class Image {
  Image({
    this.id,
    this.dateCreated,
    this.dateCreatedGmt,
    this.dateModified,
    this.dateModifiedGmt,
    this.src,
    this.name,
    this.alt,
  });

  int? id;
  DateTime? dateCreated;
  DateTime? dateCreatedGmt;
  DateTime? dateModified;
  DateTime? dateModifiedGmt;
  String? src;
  String? name;
  String? alt;

  factory Image.fromJson(Map<String, dynamic> json) => Image(
    id: json["id"],
    dateCreated: DateTime.parse(json["date_created"]),
    dateCreatedGmt: DateTime.parse(json["date_created_gmt"]),
    dateModified: DateTime.parse(json["date_modified"]),
    dateModifiedGmt: DateTime.parse(json["date_modified_gmt"]),
    src: json["src"],
    name: json["name"],
    alt: json["alt"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "date_created": dateCreated!.toIso8601String(),
    "date_created_gmt": dateCreatedGmt!.toIso8601String(),
    "date_modified": dateModified!.toIso8601String(),
    "date_modified_gmt": dateModifiedGmt!.toIso8601String(),
    "src": src,
    "name": name,
    "alt": alt,
  };
}

#这就是我尝试获取数据的方式。我正在尝试获取数据并将该数据存储在列表中，以便我可以根据我的设计呈现该数据

  Future<void> fetchCategory(BuildContext context) async{
    const url = "https://sweet-ardinghelli.3-108-138-206.plesk.page/wp-json/wc/v3/products/categories";

    try{
      final response = await http.get(Uri.parse(url));
      final extractedData = json.decode(response.body);
      print(extractedData);
      List<CategoryModel> loadedData = [];
      if(extractedData == null){
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text("Data is Null failed to fetch data!"),
          duration: Duration(seconds: 3),));
      }
      extractedData.forEach((element){
        loadedData.add(CategoryModel(
          id:element['id'],
          name:element['name'],
          image: element['image']['src']
          // image: element!['image']
          // image: element['image']==null?Text("no Image to show"):element['image']['src']
        ));
      });
      _cItems = loadedData;
      print(_cItems);
      notifyListeners();
    }catch(e){
      rethrow;
    }
  }

#但我无法获取图像图像在这样的嵌套数据中

[
{id: 25, 
name: Bakery, 
slug: bakery, 
parent: 0, 
description: , 
display: products, 
image: {
     id: 83, 
     date_created: 2021-07-16T12:16:24, 
     date_created_gmt: 2021-07-16T12:16:24, 
     date_modified: 2021-07-16T12:16:24, 
     date_modified_gmt: 2021-07-16T12:16:24, 
     src: https://sweet-ardinghelli.3-108-138-206.plesk.page/wp-content/uploads/2021/07/Intersection.png, 
     name: Intersection, 
    alt: 
  }
]

#我想获取Image里面的src

Answer 1

不应该使用在 CategoryModel 中声明的 fromJson 方法吗？

*编辑

像这样：

loadedData.add(CategoryModel.fromJson(element));

**编辑

如何筛选数据？

     Future<void> fetchCategory(BuildContext context) async{
    const url = "https://sweet-ardinghelli.3-108-138-206.plesk.page/wp-json/wc/v3/products/categories";
    try{
      final response = await http.get(Uri.parse(url));
      final extractedData = json.decode(response.body);
      print(extractedData);
      List<CategoryModel> loadedData = [];
      if(extractedData == null){
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text("Data is Null failed to fetch data!"),
          duration: Duration(seconds: 3),));
      }
      extractedData.forEach((element){
        // Something like this to filter the elements before adding to list.
        final item = CategoryModel.fromJson(element);
        if(item.on_sale == true){
            loadedData.add(CategoryModel.fromJson(element));
        }

        });
      _cItems = loadedData;
      print(_cItems);
      notifyListeners();
    }catch(e){
      rethrow;
    }
  }

Answer 2

使用 https://app.quicktype.io/ 轻松创建模型类以从和到 json 进行解析。是的，它适用于 dart 和许多其他语言。

我如何获取嵌套的 json 数据

how can i fetch nested json data

json

flutter

dart-null-safety