如何将API返回的键值对字符串JSON数组转为label-value对象数组？

原始API返回内容 #

[
  "{'apple': 'enabled'}",
  "{'banana': 'disabled'}"
] 

需要转换成的目标格式 #

[
  {
    label: 'apple',
    value: 'enabled'
  },
  {
    label: 'banana',
    value: 'disabled'
  }
]

目前用JSON5.parse()得到的非预期结果 #

[
  {
    apple: 'enabled',
  },
  {
    banana: 'disabled'
  }
]

解决方案 #

你可以通过以下安全方式完成转换，不会修改原始的键值内容：

单键值对场景（每个字符串解析后只有一组键值）

遍历原始数组，先用JSON5.parse把每个字符串解析成对象，再提取对象的键和值，映射成你需要的label/value结构：

const rawApiData = [
  "{'apple': 'enabled'}",
  "{'banana': 'disabled'}"
];

const transformedData = rawApiData.map(item => {
  const parsedObj = JSON5.parse(item);
  // 取出对象的唯一键
  const [key] = Object.keys(parsedObj);
  return {
    label: key,
    value: parsedObj[key]
  };
});

console.log(transformedData);

多键值对场景（单个字符串解析后有多组键值）

如果API返回的字符串里可能包含多个键值对，用flatMap结合Object.entries处理，把每个键值对都转成独立的label/value对象：

const rawMultiData = [
  "{'apple': 'enabled', 'orange': 'enabled'}",
  "{'banana': 'disabled'}"
];

const transformedMultiData = rawMultiData.flatMap(item => {
  const parsedObj = JSON5.parse(item);
  // 把对象转成键值对数组，再逐个映射
  return Object.entries(parsedObj).map(([key, val]) => ({
    label: key,
    value: val
  }));
});

// 输出结果：
// [
//   { label: 'apple', value: 'enabled' },
//   { label: 'orange', value: 'enabled' },
//   { label: 'banana', value: 'disabled' }
// ]

这种方式完全依赖原生对象方法提取键值，不会对原始的键或值做任何修改，完全满足需求。

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