Flutter中解析复杂动态JSON、Local DB存储及UI展示异常问题

一、数据库存储不全的修复 #

当前仅meta字段被存入，核心原因是未递归解析meta数组内的嵌套分类结构，或数据库未配置支持嵌套数据的存储规则。以下是通用修复方案：

1. 解析API响应为可存储结构 #

如果使用localStorage（适合小型数据），先将嵌套的meta结构转换为键值对格式，保留所有层级信息：

// 假设API响应已存入response变量
const parseMetaData = (metaArray) => {
  const result = {};
  metaArray.forEach(item => {
    // 获取分类名称（如General、Morphological Characteristics）
    const category = Object.keys(item)[0];
    // 将分类下的属性数组转为键值对对象
    result[category] = item[category].reduce((acc, prop) => {
      const propKey = Object.keys(prop)[0];
      acc[propKey] = prop[propKey];
      return acc;
    }, {});
  });
  return result;
};

// 解析后存入本地存储
const parsedData = parseMetaData(response.meta);
localStorage.setItem('cropVarietyData', JSON.stringify(parsedData));

2. 结构化数据库（如IndexedDB）适配 #

确保对象仓库支持嵌套对象存储，直接存入解析后的完整结构，而非仅保留原始meta数组。

二、UI仅显示单个属性的修复 #

UI只展示"Name before Release"和"BL 3264"，是因为渲染逻辑仅遍历了General分类的第一个属性，未覆盖所有分类及属性。以下是HTML+JS渲染示例：

1. 准备UI容器 #

<div id="cropDataContainer"></div>

2. 编写全量渲染逻辑 #

// 读取本地存储的解析后数据
const storedData = JSON.parse(localStorage.getItem('cropVarietyData'));
const container = document.getElementById('cropDataContainer');

// 遍历所有分类
for (const [category, properties] of Object.entries(storedData)) {
  // 创建分类标题
  const categoryTitle = document.createElement('h3');
  categoryTitle.textContent = category;
  container.appendChild(categoryTitle);

  // 创建属性列表
  const propList = document.createElement('ul');
  // 遍历当前分类下的所有属性
  for (const [propName, propValue] of Object.entries(properties)) {
    const listItem = document.createElement('li');
    // 特殊处理图片数组的渲染
    if (category === 'imagearray') {
      const img = document.createElement('img');
      img.src = propValue;
      img.alt = propName;
      img.style.maxWidth = '200px';
      listItem.appendChild(document.createTextNode(`${propName}: `));
      listItem.appendChild(img);
    } else {
      listItem.textContent = `${propName}: ${propValue}`;
    }
    propList.appendChild(listItem);
  }
  container.appendChild(propList);
}

关键注意事项 #

• 针对imagearray的特殊结构，需单独处理以正确提取图片URL
• 若使用React/Vue等框架，需将渲染逻辑调整为对应框架语法，核心思路保持一致：遍历所有分类与属性
• 存储前需验证数据完整性，避免API响应格式异常导致存储失败

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