Flutter：如何解码多个json数据数组？答案

【问题标题】：Flutter: How to decode multiple array of json data?Flutter：如何解码多个json数据数组？
【发布时间】：2021-07-13 07:04:51
【问题描述】：

这是我拥有的 json 数据：

{ "data": [ { "id": "23", "type": "product", "attributes": { "slug": "", "name": "", }, "relationships": {} }, { "id": "25", "type": "product", "attributes": { "slug": "", "name": "", }, "relationships": {} }, { "id": "30", "type": "product", "attributes": { "slug": "", "name": "", }, "relationships": {} }, { "id": "31", "type": "product", "attributes": { "slug": "", "name": "", }, "relationships": {} } ], "included": [ { "id": "106", "type": "image", "attributes": { "viewable_type": "", "viewable_id": 48, "mobile_image_styles": { "mini": { "url": "", "size": "48x48>", "width": 48, "height": 48 }, "small": { "url": "", "size": "100x100>", "width": 100, "height": 100 } } } } ] }

我的问题是：我如何编写模型并解码这个 json 数据？

This is sameple json

*** 编辑：这就是我只解码 ['data'] 但现在它已“包含”所以如何解码它？==> var res = await productApi.getResult(pageNumber, status); var responseJson = json.decode(res); var list = (responseJson['data'] as List) .map((p) => ProductModel2.fromJson(p)) .toList();

【问题讨论】：

这就是我只解码 ['data'] 但现在它已“包含”所以如何解码它？==> var res = await productApi.getResult(pageNumber, status); var responseJson = json.decode(res); var list = (responseJson['data'] as List) .map((p) => ProductModel2.fromJson(p)) .toList();
给出API链接。我会在我的机器上试试

标签： arrays json list flutter decode

【解决方案1】：

使用 JSON 模型的一个绝妙工具是 quicktype

您可以粘贴您的数据，它会为您创建一个解析器。
选择 Dart 作为输出语言。

此外，您的数据中似乎存在错误，属性名称后有一个额外的逗号。
我使用这个示例来使用生成器：

{ 
"data": [ 
    { 
        "id": "23",
        "type": "product",
        "attributes": { 
            "slug": "",
            "name": ""
        },
        "relationships": {} 
    } 
],  
"included": [ 
    { 
        "id": "106",
        "type": "image",
        "attributes": {
            "viewable_type": "",
            "viewable_id": "48",
            "mobile_image_styles": {
                "mini": { 
                    "url": "", 
                    "size": "48x48>", 
                    "width": 48, 
                    "height": 48 
                }, 
                "small": { 
                    "url": "", 
                    "size": "100x100>", 
                    "width": 100, 
                    "height": 100
                } 
            } 
        } 
    } 
  ]
}

【讨论】：

【解决方案2】：

您可以根据需要使用this website 生成模型类。这是我从那里得到的。

// To parse this JSON data, do
//
//     final welcome = welcomeFromMap(jsonString);

import 'dart:convert';

Welcome welcomeFromMap(String str) => Welcome.fromMap(json.decode(str));

String welcomeToMap(Welcome data) => json.encode(data.toMap());

class Welcome {
    Welcome({
        this.data,
        this.included,
    });

    List<Datum> data;
    List<Included> included;

    factory Welcome.fromMap(Map<String, dynamic> json) => Welcome(
        data: List<Datum>.from(json["data"].map((x) => Datum.fromMap(x))),
        included: List<Included>.from(json["included"].map((x) => Included.fromMap(x))),
    );

    Map<String, dynamic> toMap() => {
        "data": List<dynamic>.from(data.map((x) => x.toMap())),
        "included": List<dynamic>.from(included.map((x) => x.toMap())),
    };
}

class Datum {
    Datum({
        this.id,
        this.type,
        this.attributes,
        this.relationships,
    });

    String id;
    String type;
    DatumAttributes attributes;
    Relationships relationships;

    factory Datum.fromMap(Map<String, dynamic> json) => Datum(
        id: json["id"],
        type: json["type"],
        attributes: DatumAttributes.fromMap(json["attributes"]),
        relationships: Relationships.fromMap(json["relationships"]),
    );

    Map<String, dynamic> toMap() => {
        "id": id,
        "type": type,
        "attributes": attributes.toMap(),
        "relationships": relationships.toMap(),
    };
}

class DatumAttributes {
    DatumAttributes({
        this.slug,
        this.name,
    });

    String slug;
    String name;

    factory DatumAttributes.fromMap(Map<String, dynamic> json) => DatumAttributes(
        slug: json["slug"],
        name: json["name"],
    );

    Map<String, dynamic> toMap() => {
        "slug": slug,
        "name": name,
    };
}

class Relationships {
    Relationships();

    factory Relationships.fromMap(Map<String, dynamic> json) => Relationships(
    );

    Map<String, dynamic> toMap() => {
    };
}

class Included {
    Included({
        this.id,
        this.type,
        this.attributes,
    });

    String id;
    String type;
    IncludedAttributes attributes;

    factory Included.fromMap(Map<String, dynamic> json) => Included(
        id: json["id"],
        type: json["type"],
        attributes: IncludedAttributes.fromMap(json["attributes"]),
    );

    Map<String, dynamic> toMap() => {
        "id": id,
        "type": type,
        "attributes": attributes.toMap(),
    };
}

class IncludedAttributes {
    IncludedAttributes({
        this.viewableType,
        this.viewableId,
        this.mobileImageStyles,
    });

    String viewableType;
    int viewableId;
    MobileImageStyles mobileImageStyles;

    factory IncludedAttributes.fromMap(Map<String, dynamic> json) => IncludedAttributes(
        viewableType: json["viewable_type"],
        viewableId: json["viewable_id"],
        mobileImageStyles: MobileImageStyles.fromMap(json["mobile_image_styles"]),
    );

    Map<String, dynamic> toMap() => {
        "viewable_type": viewableType,
        "viewable_id": viewableId,
        "mobile_image_styles": mobileImageStyles.toMap(),
    };
}

class MobileImageStyles {
    MobileImageStyles({
        this.mini,
        this.small,
    });

    Mini mini;
    Mini small;

    factory MobileImageStyles.fromMap(Map<String, dynamic> json) => MobileImageStyles(
        mini: Mini.fromMap(json["mini"]),
        small: Mini.fromMap(json["small"]),
    );

    Map<String, dynamic> toMap() => {
        "mini": mini.toMap(),
        "small": small.toMap(),
    };
}

class Mini {
    Mini({
        this.url,
        this.size,
        this.width,
        this.height,
    });

    String url;
    String size;
    int width;
    int height;

    factory Mini.fromMap(Map<String, dynamic> json) => Mini(
        url: json["url"],
        size: json["size"],
        width: json["width"],
        height: json["height"],
    );

    Map<String, dynamic> toMap() => {
        "url": url,
        "size": size,
        "width": width,
        "height": height,
    };
}

【讨论】：

【解决方案3】：

一种简单的方法是使用工厂构造函数。

factory Class.fromJson(Map<String, dynamic> json) {
    return Class(
      variableName: json['variableName'],
    );

将您的 json 文件传递给类工厂构造函数，如下所示：

json = someJsonFile;
Class obj = Class.fromJson(json['variableName']);

【讨论】：