如何在Dart/Flutter中解码JSON数组并获取images字段内的src属性

前置准备 #

首先导入Dart内置的JSON解析库：

import 'dart:convert';

注意你给出的原始JSON存在冗余闭合符号的语法问题，实际服务端返回的合法JSON结构中需要删掉images数组后多余的}和逗号，否则会触发解析报错。

方式1：手动动态解析（适合快速调试） #

直接通过键名访问嵌套层级即可，完整示例代码：

void parseJson(String responseBody) {
  // 解码JSON，最外层是数组结构
  List<dynamic> productList = jsonDecode(responseBody);
  
  // 遍历所有商品项
  for (var product in productList) {
    // 你已经可以正常获取的基础字段
    int productId = product['id'];
    String productName = product['name'];
    
    // 获取images数组
    List<dynamic> images = product['images'];
    // 遍历images数组获取所有src属性，也可以按需取指定下标的src
    for (var image in images) {
      String imageSrc = image['src'];
      print('商品$productName的图片地址：$imageSrc');
    }
    
    // 仅需要取第一张图片src的场景，加判空处理避免异常
    if (images.isNotEmpty) {
      String firstImageSrc = images.first['src'];
    }
  }
}

方式2：模型类序列化（适合生产环境，类型安全） #

手动定义实体类通过fromJson方法做类型转换，可以避免动态类型带来的潜在运行时异常：
首先定义图片实体类：

class ImageItem {
  final int id;
  final String src;
  final String name;
  final String alt;

  ImageItem({
    required this.id,
    required this.src,
    required this.name,
    required this.alt,
  });

  factory ImageItem.fromJson(Map<String, dynamic> json) {
    return ImageItem(
      id: json['id'] as int,
      src: json['src'] as String,
      name: json['name'] as String,
      alt: json['alt'] as String,
    );
  }
}

再定义商品实体类（其他字段可按需补充）：

class Product {
  final int id;
  final String name;
  final List<ImageItem> images;
  // 其他字段如sku、price等可按需求补充

  Product({
    required this.id,
    required this.name,
    required this.images,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    // 解析images数组
    var imagesJson = json['images'] as List;
    List<ImageItem> imagesList = imagesJson.map((i) => ImageItem.fromJson(i)).toList();

    return Product(
      id: json['id'] as int,
      name: json['name'] as String,
      images: imagesList,
    );
  }
}

使用方式：

void parseProductJson(String responseBody) {
  List<dynamic> productJsonList = jsonDecode(responseBody);
  List<Product> products = productJsonList.map((json) => Product.fromJson(json)).toList();
  
  // 直接访问属性即可
  for (var product in products) {
    for (var img in product.images) {
      print(img.src);
    }
  }
}

内容的提问来源于stack exchange，提问作者Navid Shokoufeh