Dart+HTML动态渲染表格报错NoSuchMethodError，求解决方案

错误根源 #

你遇到的NoSuchMethodError: The getter 'iterator' was called on null，本质是你在尝试遍历一个null值。Dart里for-in循环依赖集合的iterator方法，而null没有这个方法，直接遍历就会触发报错。

大概率是这几个情况导致的：

• JSON返回的结构和预期不符，data['items']字段不存在或者不是数组，拿到了null
• 网络请求失败，比如data.json路径错误，导致解析出来的data本身就是null
• 传参给渲染方法时没做校验，直接把null丢进去遍历

分步修复 #

1. 给渲染方法加空校验 #

先解决最直接的遍历null问题：

void renderTable(List<dynamic>? items) { // 将参数改为可空类型
  final tbody = querySelector('#table-body') as TableSectionElement;
  tbody.children.clear(); // 先清空旧数据

  if (items == null || items.isEmpty) {
    final emptyRow = TableRowElement();
    emptyRow.appendHtml('<td colspan="3" style="text-align:center;">暂无数据</td>');
    tbody.append(emptyRow);
    return;
  }

  // 正常遍历渲染行
  for (final item in items) {
    final row = TableRowElement();
    row.appendHtml('<td>${item['id']}</td>');
    row.appendHtml('<td>${item['name']}</td>');
    row.appendHtml('<td>${item['value']}</td>');
    tbody.append(row);
  }
}

2. 给JSON解析加容错逻辑 #

确保拿到的数据源符合预期，同时捕获请求和解析异常：

import 'dart:html';
import 'dart:convert';

void main() async {
  try {
    final response = await HttpRequest.getString('data.json');
    final data = jsonDecode(response);

    // 严格校验JSON结构，避免类型错误
    if (data is Map<String, dynamic> && data['items'] is List) {
      renderTable(data['items'] as List<dynamic>);
    } else {
      renderTable(null);
      print('JSON格式异常：未找到合法的items数组');
    }
  } catch (e) {
    renderTable(null);
    print('请求或解析出错：$e');
  }
}

3. 实现目标表格样式（示例） #

假设你需要表头深色高亮、行交替背景色、hover高亮的样式，给HTML添加以下CSS：

#data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

#data-table th {
  background-color: #2d3748;
  color: #fff;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}

#data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #e2e8f0;
}

#data-table tbody tr:nth-child(even) {
  background-color: #f7fafc;
}

#data-table tbody tr:hover {
  background-color: #edf2f7;
}

额外提醒 #

• 开发时可以用print(data)或浏览器控制台查看解析后的JSON结构，确认字段是否正确
• Dart的类型检查要做足，避免把Map或其他类型当成List来使用
• 确认网络请求的文件路径正确，比如data.json是否和Dart脚本在同一目录

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