如何在JavaScript中通过比较对象数组与对象获取目标结果？

问题场景 #

现有固定的题目数组 data，以及随用户作答动态变化的对象 submittedValue，需要从两者中提取出包含题目状态与对应作答文本的结果数组。

示例数据：

const data = [{
  id: "Q1",
  state: "Test 1",
  answers: [
    { id: "Q1A1", text: "Yes" },
    { id: "Q1A2", text: "No" },
  ],
}, {
  id: "Q2",
  state: "Test 2",
  answers: [
    { id: "Q2A1", text: "Yes" },
    { id: "Q2A2", text: "No" },
  ],
}];

const submittedValue = {
  Q1: {
    Q1A1: "Yes",
  },
  Q2: {
    Q2A2: "No",
  },
};

期望输出：

const result = [
  { state: "Test 1", answer: "Yes" },
  { state: "Test 2", answer: "No" },
];

解决方案 #

方案1：直接提取作答文本（简洁高效）

利用Array.map遍历题目数组，结合Object.values直接从submittedValue中提取作答文本：

const result = data.map(item => {
  const userAnswer = submittedValue[item.id];
  const answerText = Object.values(userAnswer)[0];
  return {
    state: item.state,
    answer: answerText
  };
});

方案2：匹配题目选项ID提取文本（更严谨）

若需确保作答文本与题目原始选项完全一致（避免submittedValue出现文本偏差），可通过匹配选项ID从data的answers数组中获取标准文本：

const result = data.map(item => {
  const [answerId] = Object.keys(submittedValue[item.id]);
  const answerText = item.answers.find(ans => ans.id === answerId).text;
  return {
    state: item.state,
    answer: answerText
  };
});

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