[英]I don't understand how to append JSON object data to an Accordion
我有一个来自 API 的 JSON 响应,示例如下所示。 在示例中, question_groups
包含 3 个组,分别名为DDD
、 FED
和IPE
,每个组中都有一个questions
数组。 实际上,有 3 个以上的组,大多数组包含 5 个或更多问题。
我可以按照每个组在 JSON 中出现的顺序显示每个question
及其相应的response
,但我不明白如何将每个组及其后续问题应用于手风琴。 我可以创建一个手风琴,在新的图层/选项卡上显示每个组,但每个图层/选项卡都包含来自所有组的所有问题。 我想让每个手风琴层都以一个group_name
为标题,并填充来自该组的问题。
这是我用于显示问题数据的代码。 此代码区分需要用户书面输入的问题和 select 选项。
const TextQuestion = ({ title, question }) => {
return (
<Box>
<TextField variant="outlined" label={title} value={question?.Question || ""} />
<TextField variant="outlined" label="Response" />
</Box>
);
};
const SelectQuestion = ({ title, question }) => {
return (
<Box>
<TextField variant="outlined" multiline label={title} value={question?.Question || ""} />
<Select label="Question" autoWidth >
{question.Choices.map((choice) => (
<MenuItem key={choice} value={choice}>
{choice}
</MenuItem>
))}
</Select>
</Box>
);
};
const questionComps = questions["question_groups"]?.map((group, i) => {
return group["questions"]?.map((question, i) => {
return question["QuestionType"] === "Text" ? (
<Box>
<TextQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
<Divider />
</Box>
) : (
<Box>
<SelectQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
<Divider />
</Box>
);
});
});
我的手风琴
<Accordion style={{ marginTop: "10px", addingLeft: "10px", }} >
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>{group?.GroupName}</Typography>
</AccordionSummary>
<AccordionDetails>{questionComps}</AccordionDetails>
</Accordion>
我的例子JSON
{
"question_groups": [
{
"GroupName": "DDD",
"questions": [
{
"Question": "Do you want a drink",
"QuestionType": "Single Choice",
"Response": null,
"Choices": [
"Yes",
"No"
]
}
],
"SizingId": null
},
{
"GroupName": "FED",
"questions": [
{
"Question": "What do you want to drink",
"QuestionType": "Single Choice",
"Response": null,
"Choices": [
null
]
},
{
"Question": "Place your drinks order",
"QuestionType": "Text",
"Response": null,
"Choices": [
null
]
}
],
"SizingId": null
},
{
"GroupName": "IPE",
"questions": [
{
"Question": "Would you like something to eat?",
"QuestionType": "Single Choice",
"Response": null,
"Choices": [
"No",
"Yes"
]
}
],
"SizingId": null
}
]
}
将组名映射到accordion summary
,然后通过accordion details
中的问题进行映射,从而生成所需的布局呈现。
const questionComps = questions["question_groups"]?.map((group, i) => {
return (
<Accordion
style={{
marginTop: "10px",
paddingLeft: "10px",
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>{group?.GroupName}</Typography>
</AccordionSummary>
<AccordionDetails>
{group["questions"]?.map((question, j) => {
return question["QuestionType"] === "Text" ? (
<Box>
<TextQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
<Divider />
</Box>
) : (
<Box>
<SelectQuestion
key={`${j}${question.Question}`}
title={group["GroupName"]}
question={question}
/>
<Divider />
</Box>
);
})}
</AccordionDetails>
</Accordion>
);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.