在 ES6 中，如何基于另一个对象详细信息从一个对象获取对象详细信息

Question

有两个文件作为questions.json和answers.json。目的是制作一个摘要页面，根据questionID和answerValues显示选定的答案及其问题，并在answers.json中显示answerValues和values.id。是否有任何选择将结果放入一个变量？

演示：https://codesandbox.io/s/pj9z6n3r20

我在 React ES6 中的不良做法

const results = answers.map(answer => {
console.log(answer)
return questions.find(question => {
console.log(question);
return question.questionID == answer.questionID
});
});
console.log(results)

问题.JSON

const questions = [
{
questionID: 1,
title: "Your gender ?",
values: [{ id: "1", value: "Male" }, { id: "2", value: "Female" }]
},
{
questionID: 2,
title: "Choose your age ?",
values: []
},
{
questionID: 3,
title: "Do you look at a screen within one hour of going to sleep ?",
values: [{ id: "1", value: "Yes" }, { id: "2", value: "No" }]
},
{
questionID: 4,
title: "What do you do most time on mobile",
values: [
{ id: "1", value: "Social media" },
{ id: "2", value: "Play game" },
{ id: "3", value: "Chat" },
{ id: "4", value: "Surf on internet" },
{ id: "5", value: "Call" }
]
},
{
questionID: 5,
title: "On average, how many hours of sleep do you get every night ?",
values: [
{ id: "1", value: "4-6" },
{ id: "2", value: "7-9" },
{ id: "3", value: "10-11" }
]
},
{
questionID: 6,
title: "Any additional comments or information we should know ?",
values: []
}
];

答案.JSON

const answers = [
{
questionID: "1",
answerValues: "1"
},
{
questionID: "2",
answerValues: "12"
},
{
questionID: "3",
answerValues: "1"
},
{
questionID: "4",
answerValues: ["2", "4"]
},
{
questionID: "5",
answerValues: "2"
},
{
questionID: "6",
answerValues: "323123123123"
}
];

Answer 1

你忘了返回questions.find的结果：

const results = answers.map(answer => {
return questions.find(question => {
return question.questionID == answer.questionID
})
})

如果您需要两者之间的某种合并，我的方法将是这样的：

const results1 = answers.map((answer) => {
const question = questions.find(question => question.questionID == answer.questionID)
return { question: question.title, answer: answer.answerValues }
})

然后，您最终会得到一个具有以下结构的关联问答对象数组：

{
"question": "Choose your age ?",
"answer": "12"
}

Answer 2

https://codesandbox.io/s/82okp2j630

const results = answers.map(answer => {
// first find the associated question
let question = questions.find((q) => q.questionID == answer.questionID);
// since your data structure is either array or string
let answerValues = (answer.answerValues instanceof Array)? answer.answerValues : [answer.answerValues];
answerValues = answerValues.map((value) => {
// grab the object associated with the current answer
const questionValue = question.values.find((q) => (q.id === value));
// if there is no associated answer just return the value
return (questionValue)? questionValue.value : value;
});
// return the expected structure used in the React component
return {
title: question.title,
// separate each answer by ,
value: answerValues.join(", ")
}
});

然后在你的 React 组件中

<h3>{result.title}</h3> Answer: {result.value}
// Results:
/// What do you do most time on mobile
/// Answer: Play game, Surf on internet