基于动态API数据的UI格式化处理技术需求

需求说明 #

API返回的records和conditional均为动态结构：列名不固定、列数量可变，需要将records中匹配conditional规则的字段值转换为带颜色样式的HTML <span>标签，未匹配的字段值保持原样。

原始API数据示例 #

let json1 = {
  "records": [
    {"ID": "1", "Value": "A005"},
    {"ID": "2", "Value": "A007"},
    {"ID": "3", "Value": "B001"},
    {"ID": "4", "Value": "B003"}
  ],
  "conditional": [{"Value": {"A005":"red","A007":"blue","B001":"green"}}]
};

目标UI展示数据示例 #

let json = {
  "records": [
    {"ID": "1", "Value": "<span style='color:red'>A005</span>"},
    {"ID": "2", "Value": "<span style='color:blue'>A007</span>"},
    {"ID": "3", "Value": "<span style='color:green'>B001</span>"},
    {"ID": "4", "Value": "B003"}
  ],
  "conditional": [{"Value": {"A005":"red","A007":"blue","B001":"green"}}]
};

通用实现方案（JavaScript） #

以下代码支持任意动态列名和条件规则，无需硬编码字段名：

function formatDataForUI(rawData) {
  // 深拷贝原始数据，避免修改原对象
  const formattedData = JSON.parse(JSON.stringify(rawData));
  
  // 整理条件规则：构建{列名: {数据值: 样式值}}的映射表
  const conditionMap = {};
  rawData.conditional.forEach(cond => {
    const [columnName, valueStyleMap] = Object.entries(cond)[0];
    conditionMap[columnName] = valueStyleMap;
  });
  
  // 遍历每条记录，处理匹配规则的字段
  formattedData.records.forEach(record => {
    Object.entries(record).forEach(([fieldName, fieldValue]) => {
      const styleMap = conditionMap[fieldName];
      if (styleMap && styleMap[fieldValue]) {
        // 替换为带颜色样式的span标签
        record[fieldName] = `<span style='color:${styleMap[fieldValue]}'>${fieldValue}</span>`;
      }
    });
  });
  
  return formattedData;
}

// 测试使用
const rawData = {
  "records": [
    {"ID": "1", "Value": "A005"},
    {"ID": "2", "Value": "A007"},
    {"ID": "3", "Value": "B001"},
    {"ID": "4", "Value": "B003"}
  ],
  "conditional": [{"Value": {"A005":"red","A007":"blue","B001":"green"}}]
};

const uiReadyData = formatDataForUI(rawData);
console.log(JSON.stringify(uiReadyData, null, 2));

代码关键点 #

• 动态适配列名：自动提取conditional中的列名和样式规则，无需针对特定字段写死逻辑
• 数据安全：通过深拷贝避免修改原始API返回数据
• 样式正确性：修正了示例中style属性的语法错误（将分号;改为CSS标准的冒号:）
• 兼容性：支持多列多规则的场景，只要conditional结构符合[{列名: {值: 样式}}]格式即可

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