前端.map()处理后端关联数组报错及键值映射需求问询

问题根源 #

后端返回的关联数组经过json_encode后会转换为JavaScript对象，而map()是数组专属方法，直接在对象上调用必然报错。用[]包裹后变成[对象]的数组结构，此时map遍历的是数组内的单个对象，无法正确提取键值对来实现需求。

正确实现方式 #

要将对象的键赋值给value、对应值赋值给label，可以用以下两种方法：

方法1：使用Object.entries()（推荐，ES2017+支持）

Object.entries()会把对象转换为[键, 值]格式的二维数组，再通过map()生成目标结构：

前端实际代码修改为：

const genreOptions = Object.entries({{ genreOptions | json_encode | raw }}).map(([key, value]) => ({
  value: key,
  label: value
}));

调试代码示例：

const genreMap = {
    "Horror": "Korku",
    "Comedy": "Komedi\u0103 Filmi",
    "Action": "Aksiyon",
    "Drama": "Drama"
};
const genreOptions = Object.entries(genreMap).map(([key, value]) => ({
    value: key,
    label: value
}));

方法2：兼容旧环境（使用Object.keys()）

如果需要支持不兼容ES2017的环境，先获取对象所有键，再遍历生成数组：

前端实际代码修改为：

const genreMap = {{ genreOptions | json_encode | raw }};
const genreOptions = Object.keys(genreMap).map(key => ({
  value: key,
  label: genreMap[key]
}));

调试代码示例：

const genreMap = {
    "Horror": "Korku",
    "Comedy": "Komedi\u0103 Filmi",
    "Action": "Aksiyon",
    "Drama": "Drama"
};
const genreOptions = Object.keys(genreMap).map(key => ({
    value: key,
    label: genreMap[key]
}));

最终效果 #

两种方法都会生成符合需求的数组：

[
  { value: "Horror", label: "Korku" },
  { value: "Comedy", label: "Komediă Filmi" },
  { value: "Action", label: "Aksiyon" },
  { value: "Drama", label: "Drama" }
]

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