[英]I don't understand how to append JSON object data to an Accordion
I have a JSON response from an API, an example of which can be seen below.我有一个来自 API 的 JSON 响应,示例如下所示。 In the example,
question_groups
contains 3 groups named DDD
, FED
, and IPE
, and within each group is a questions
array.在示例中,
question_groups
包含 3 个组,分别名为DDD
、 FED
和IPE
,每个组中都有一个questions
数组。 In reality, there are more than 3 groups and most groups contain 5 or more questions.实际上,有 3 个以上的组,大多数组包含 5 个或更多问题。
I can display each question
& its corresponding response
in the order in which each group appears in JSON, but I don't understand how I can apply each group and its subsequent questions to an accordion.我可以按照每个组在 JSON 中出现的顺序显示每个
question
及其相应的response
,但我不明白如何将每个组及其后续问题应用于手风琴。 I can create an accordion which displays each group on a new layer/tab, but each layer/tab contains all questions from all groups.我可以创建一个手风琴,在新的图层/选项卡上显示每个组,但每个图层/选项卡都包含来自所有组的所有问题。 I want to make it that each accordion layer is titled with one
group_name
and is populated with the questions from that group.我想让每个手风琴层都以一个
group_name
为标题,并填充来自该组的问题。
Here is my code for displaying the questions data.这是我用于显示问题数据的代码。 This code differentiates between questions which require a users written input and a select option.
此代码区分需要用户书面输入的问题和 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>
);
});
});
My accordion我的手风琴
<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>
The example of my JSON我的例子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
}
]
}
Mapping the group names to the accordion summary
and then mapping through the questions inside the accordion details
results in the desired layout rendered.将组名映射到
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.