如何在Dart/Flutter中解码复杂JSON并正确获取images数组的src字段

你遇到的问题是两个取值逻辑错误导致的：

• JSON 结构中图片字段的名称是 images（复数），你代码中错误写为了单数 image，字段名不匹配无法读到对应值
• images 是数组类型，即使只返回一个图片元素，也需要先指定数组下标，才能读取元素内部的 src 属性

补充说明：你返回的 JSON 根节点本身是数组，你提到 id、name 等字段可以正常读取，说明你已经提前取到了数组内的单个商品 Map 对象，不需要额外调整根节点取值逻辑。

快速修复写法 #

直接修改你现有解码逻辑里的图片字段取值部分即可：

var bodybytedecoded= jsonDecode(utf8.decode(response.bodyBytes));
// 如果还没取数组第一个元素，先加一步 var productData = bodybytedecoded[0];
var productItem = ProductModel(
  bodybytedecoded["id"], 
  bodybytedecoded["name"], 
  bodybytedecoded["regular_price"],
  bodybytedecoded["description"],
  // 修正为复数images，先取数组第一个元素再取src
  bodybytedecoded["images"][0]["src"]
);

增加空判断避免崩溃 #

如果后台存在返回空图片数组的场景，建议增加空判断逻辑，避免下标越界崩溃：

var productData = bodybytedecoded[0];
// 先处理图片取值
String? imgSrc;
if (productData["images"] != null && productData["images"].isNotEmpty) {
  imgSrc = productData["images"][0]["src"];
}
var productItem = ProductModel(
  productData["id"], 
  productData["name"], 
  productData["regular_price"],
  productData["description"],
  imgSrc
);

推荐优化写法 #

给模型类增加 fromJson 工厂方法，后续解析代码更简洁易维护：
首先在 ProductModel 类中增加如下代码：

factory ProductModel.fromJson(Map<String, dynamic> json) {
  String? imgSrc;
  if (json["images"] != null && json["images"].isNotEmpty) {
    imgSrc = json["images"][0]["src"];
  }
  return ProductModel(
    json["id"],
    json["name"],
    json["regular_price"],
    json["description"],
    imgSrc
  );
}

后续解析时直接调用即可：

var productData = jsonDecode(utf8.decode(response.bodyBytes))[0];
var productItem = ProductModel.fromJson(productData);

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