Vue3 Composition API：如何从JSON对象数组提取state值

你可以利用JavaScript数组的map()方法遍历west数组，提取每个元素中的state值，再组装成目标格式。注意你给出的期望格式{"state": [{"CA"}, {"AZ"}, {"WA"}]}不符合JSON规范（对象必须包含键值对），下面提供两种符合规范的实现方式，你可按需选择：

方式一：数组元素为州代码作为键值的对象 #

如果希望数组中每个元素是仅包含州代码的键值对对象（类似{"CA": "CA"}），代码如下：

import { west } from "../json/West.json"

const formattedStates = computed(() => {
  // 遍历数组，生成每个州代码对应的键值对对象
  const stateArray = west.map(item => ({ [item.state]: item.state }));
  // 组装成外层带state键的对象
  return { state: stateArray };
});

方式二：数组元素为统一键名的对象 #

如果希望数组元素是{"state": "CA"}这类更常规的结构，可修改为：

import { west } from "../json/West.json"

const formattedStates = computed(() => {
  const stateArray = west.map(item => ({ state: item.state }));
  return { state: stateArray };
});

调用formattedStates.value即可获取目标结构。

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