基于两个API响应生成带选中状态的复选框数据实现方案咨询

需求回顾 #

基于两个API返回的ar0和ar11数据，生成用于渲染复选框的结构化数据：

• 两个数据源的公共值，ischecked设为true（选中状态）
• 仅存在于ar0中的值，ischecked设为false（未选中状态）
• 最终生成你需要的output数组格式

实现思路 #

1. 预处理ar11：将数组形式的ar11转换为键值对结构，并用Set存储每个key对应的已选值，提升后续查找效率
2. 遍历生成目标结构：遍历ar0.properties中的每个key，对每个元素判断是否存在于ar11的对应集合中，生成带cname和ischecked的对象
3. 组装结果：将每个key的处理结果包装为目标格式的对象，组成最终数组

代码实现 #

const ar0 =  { 
  "properties": {
    "role": [ "myservice1", "myservice2", "myservice" ],
    "perm": [ "abcd", "defc", "mnop" ]
  }
};

const ar11 = [{ 
  "role": [ "myservice1", "myservice2" ]
}, {
  "perm": [ "abcd", "defc" ]
}];

// 把ar11转换成键为key，值为Set的映射对象
const selectedMap = ar11.reduce((acc, item) => {
  const [key, values] = Object.entries(item)[0];
  acc[key] = new Set(values);
  return acc;
}, {});

// 生成目标output数组
const output = Object.entries(ar0.properties).map(([key, items]) => {
  const selectedSet = selectedMap[key];
  return {
    [key]: items.map(cname => ({
      cname,
      ischecked: selectedSet.has(cname)
    }))
  };
});

console.log(output);

代码说明 #

• 使用reduce处理ar11：将分散的数组元素合并为统一的映射对象，用Set存储值是因为其查找操作的时间复杂度为O(1)，比数组的includes（O(n)）更高效，适合数据量较大的场景
• 遍历ar0.properties：通过Object.entries获取每个key及其对应的数组，对每个元素判断是否在selectedMap的对应集合中，直接生成ischecked状态
• 最终结构完全匹配你需要的output格式，可直接用于遍历渲染复选框

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