我不明白如何 append JSON object 數據到手風琴

Question

我有一個來自 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
        }
      ]
    }

Answer 1

將組名映射到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>
        );
    });