如何在 dart/flutter 中解码 json 数组?

Posted

技术标签:

【中文标题】如何在 dart/flutter 中解码 json 数组?【英文标题】:How to decode json array in dart/flutter? 【发布时间】:2021-12-28 04:19:48 【问题描述】:

当我向服务器发送请求时,我得到一个这样的 json:

[
    
        "id": 56012,
        "name": "Thename",
        "slug": "anything",
        "permalink": "my link",
        "date_created": "2021-11-06T09:55:58",
        "date_created_gmt": "2021-11-06T06:25:58",
        "date_modified": "2021-11-16T16:32:57",
        "date_modified_gmt": "2021-11-16T13:02:57",
        "type": "simple",
        "status": "publish",
        "featured": false,
        "catalog_visibility": "visible",
        "description": "<p>some thing</p>\n",
        "short_description": "",
        "sku": "6260492610086",
        "price": "45000",
        "regular_price": "45000",
        "sale_price": "45000",
        "weight": "",
        "dimensions": 
            "length": "",
            "width": "",
            "height": ""
        ,
        "categories": [
            
                "id": 1865,
                "name": "name",
                "slug": "123"
            
        ],
        "tags": [],
        "images": [
            
                "id": 56043,
                "src": "another link",
                "name": "Name",
                "alt": ""
            
        ],
        
    ,
]

我想知道如何在 dart 中解码这个 json? 我可以解码和使用“name”和“id”,但我的问题是图像。我不知道如何使用图像中的“src”。

【问题讨论】:

【参考方案1】:

简单的方法

var dataList = [
    
        "id": 56012,
        "name": "Thename",
        "slug": "anything",
        "permalink": "my link",
        "date_created": "2021-11-06T09:55:58",
        "date_created_gmt": "2021-11-06T06:25:58",
        "date_modified": "2021-11-16T16:32:57",
        "date_modified_gmt": "2021-11-16T13:02:57",
        "type": "simple",
        "status": "publish",
        "featured": false,
        "catalog_visibility": "visible",
        "description": "<p>some thing</p>\n",
        "short_description": "",
        "sku": "6260492610086",
        "price": "45000",
        "regular_price": "45000",
        "sale_price": "45000",
        "weight": "",
        "dimensions": 
            "length": "",
            "width": "",
            "height": ""
        ,
        "categories": [
            
                "id": 1865,
                "name": "name",
                "slug": "123"
            
        ],
        "tags": [],
        "images": [
            
                "id": 56043,
                "src": "another link",
                "name": "Name",
                "alt": ""
            
        ],
        
    ,
];

var src = dataList[0]['images'][0]['src'];

但我推荐这样

var dataList =[
    
        "id": 1,
        "name": "sample1"
    ,
    
        "id": 2,
        "name": "sample2"
    
];



---
class Data 
  int id;
  String name;

  Data(this.id, this.name);

  Data.fromJson(Map<String, dynamic> json) 
    id = json['id'];
    name = json['name'];
  

  Map<String, dynamic> toJson() 
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  

---

var dataObjectList = dataList.map((e)=>Data.fromJson(e)).toList();

var id = dataObjectList.id;

【讨论】:

【参考方案2】:

建议使用quicktype.io,您必须复制该 json 响应并将其转换为 Dart 代码。它非常容易使用

【讨论】:

【参考方案3】:

试试下面的答案,希望对你有帮助。

参考 JSON 和序列化 here 参考 dart:convert 库 here 参考 解析 JSON here 你使用了jsonDecode函数here

使用import 'dart:convert'

json.decode(yourjsonString_varibale) 

【讨论】:

【参考方案4】:

您可以通过以下方式解码代码:

var result = json.decode(jsonVariable)

那么:

找到你喜欢的图片对象

result['images'][[0]['src']

在颤振network.image中使用src链接。

图像对象是一个列表,所以使用ListView.builder

【讨论】:

【参考方案5】:

推荐使用Json to Dart 然后item.images[0].src

class Item 
   int id;
  String name;
  String slug;
  String permalink;
  String dateCreated;
  String dateCreatedGmt;
  String dateModified;
  String dateModifiedGmt;
  String type;
  String status;
  bool featured;
  String catalogVisibility;
  String description;
  String shortDescription;
  String sku;
  String price;
  String regularPrice;
  String salePrice;
  String weight;
  Dimensions dimensions;
  List<Categories> categories;
  List<Null> tags;
  List<Images> images;

  Item(
      this.id,
      this.name,
      this.slug,
      this.permalink,
      this.dateCreated,
      this.dateCreatedGmt,
      this.dateModified,
      this.dateModifiedGmt,
      this.type,
      this.status,
      this.featured,
      this.catalogVisibility,
      this.description,
      this.shortDescription,
      this.sku,
      this.price,
      this.regularPrice,
      this.salePrice,
      this.weight,
      this.dimensions,
      this.categories,
      this.tags,
      this.images);

  Item.fromJson(Map<String, dynamic> json) 
    id = json['id'];
    name = json['name'];
    slug = json['slug'];
    permalink = json['permalink'];
    dateCreated = json['date_created'];
    dateCreatedGmt = json['date_created_gmt'];
    dateModified = json['date_modified'];
    dateModifiedGmt = json['date_modified_gmt'];
    type = json['type'];
    status = json['status'];
    featured = json['featured'];
    catalogVisibility = json['catalog_visibility'];
    description = json['description'];
    shortDescription = json['short_description'];
    sku = json['sku'];
    price = json['price'];
    regularPrice = json['regular_price'];
    salePrice = json['sale_price'];
    weight = json['weight'];
    dimensions = json['dimensions'] != null
        ? new Dimensions.fromJson(json['dimensions'])
        : null;
    if (json['categories'] != null) 
      categories = new List<Categories>();
      json['categories'].forEach((v) 
        categories.add(new Categories.fromJson(v));
      );
    
    if (json['tags'] != null) 
      tags = new List<Null>();
      json['tags'].forEach((v) 
        tags.add(new Null.fromJson(v));
      );
    
    if (json['images'] != null) 
      images = new List<Images>();
      json['images'].forEach((v) 
        images.add(new Images.fromJson(v));
      );
    
  

  Map<String, dynamic> toJson() 
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['slug'] = this.slug;
    data['permalink'] = this.permalink;
    data['date_created'] = this.dateCreated;
    data['date_created_gmt'] = this.dateCreatedGmt;
    data['date_modified'] = this.dateModified;
    data['date_modified_gmt'] = this.dateModifiedGmt;
    data['type'] = this.type;
    data['status'] = this.status;
    data['featured'] = this.featured;
    data['catalog_visibility'] = this.catalogVisibility;
    data['description'] = this.description;
    data['short_description'] = this.shortDescription;
    data['sku'] = this.sku;
    data['price'] = this.price;
    data['regular_price'] = this.regularPrice;
    data['sale_price'] = this.salePrice;
    data['weight'] = this.weight;
    if (this.dimensions != null) 
      data['dimensions'] = this.dimensions.toJson();
    
    if (this.categories != null) 
      data['categories'] = this.categories.map((v) => v.toJson()).toList();
    
    if (this.tags != null) 
      data['tags'] = this.tags.map((v) => v.toJson()).toList();
    
    if (this.images != null) 
      data['images'] = this.images.map((v) => v.toJson()).toList();
    
    return data;
  


class Dimensions 
  String length;
  String width;
  String height;

  Dimensions(this.length, this.width, this.height);

  Dimensions.fromJson(Map<String, dynamic> json) 
    length = json['length'];
    width = json['width'];
    height = json['height'];
  

  Map<String, dynamic> toJson() 
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['length'] = this.length;
    data['width'] = this.width;
    data['height'] = this.height;
    return data;
  


class Categories 
  int id;
  String name;
  String slug;

  Categories(this.id, this.name, this.slug);

  Categories.fromJson(Map<String, dynamic> json) 
    id = json['id'];
    name = json['name'];
    slug = json['slug'];
  

  Map<String, dynamic> toJson() 
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['slug'] = this.slug;
    return data;
  


class Images 
  int id;
  String src;
  String name;
  String alt;

  Images(this.id, this.src, this.name, this.alt);

  Images.fromJson(Map<String, dynamic> json) 
    id = json['id'];
    src = json['src'];
    name = json['name'];
    alt = json['alt'];
  

  Map<String, dynamic> toJson() 
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['src'] = this.src;
    data['name'] = this.name;
    data['alt'] = this.alt;
    return data;
  

【讨论】:

以上是关于如何在 dart/flutter 中解码 json 数组?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 dart/flutter 中提取 JSON 子数据

如何在Dart / flutter中映射和显示嵌套的JSON?

在 Dart/Flutter 中解析嵌套的 JSON

为啥 build_runner 在 dart/flutter 中序列化 JSON 时不生成文件

Dart/Flutter 中用于 FHIR 资源的 Json oneOf

如何编写解析此 JSON 的 Dart 模型类?