使用 javascript 和 vuejs 创建树

Question

我想用 javascript 和 vuejs 创建一棵树 https://fr.vuejs.org/v2/examples/tree-view.html 我很年轻，我不太了解算法。我试图做一些循环，但它不是递归的......我的想法是将属于条件部分的问题和答案放入一个对象中。

我的输出是这样的：

{
  name: "Do you have a car ?",
  children: [
    {
      name: "Yes",
      children: [
        {
          name: "Do you have an electric car ?",
          children: [
            { name: "Yes", children: [{ name: "Do you have any comments ?" }] },
            { name: "No", children: [{ name: "Do you have any comments ?" }] },
          ],
        },
      ],
    },
    {
      name: "No",
      children: [
        {
          name: "Do you have a bicycle ?",
          children: [
            { name: "Yes", children: [{ name: "Do you have any comments ?" }] },
            { name: "No", children: [{ name: "Do you have any comments ?" }] },
          ],
        },
      ],
    },
  ],
};

和我的条目：

{
    id: 1,
    entitled: "first question",
    questions: [
      {
        id: 1,
        entitled: "Do you have a car ?",
        answers: [
          { id: 1, entitled: "Yes", conditionalSection: 2 },
          { id: 2, entitled: "No", conditionalSection: 3 },
        ],
      },
    ],
  },
  {
    id: 2,
    entitled: "section yes",
    questions: [
      {
        id: 1,
        entitled: "Do you have an electric car ?",
        answers: [
          { id: 1, entitled: "Yes", conditionalSection: 4 },
          { id: 2, entitled: "No", conditionalSection: 4 },
        ],
      },
    ],
  },
  {
    id: 3,
    entitled: "section no",
    questions: [
      {
        id: 1,
        entitled: "Do you have a bicycle ?",
        answers: [
          { id: 1, entitled: "Yes", conditionalSection: 4 },
          { id: 2, entitled: "No", conditionalSection: 4 },
        ],
      }
    ],
  },
  {
    id: 4,
    entitled: "end",
    questions: [
      {
        id: 1,
        entitled: "Do you have any comments ?",
      }
    ],
  },
];

我不知道我该如何正确地写这个......

Answer 1

需要一个递归函数来将条目转换为输出等数据。

完整的代码sn-p就在下面。

const convert = (id) =>
  entry[id].questions.map((question) => ({
    name: question.entitled,
    children: !question.answers
      ? { name: question.entitled }
      : question.answers.map((answer) => ({
          name: answer.entitled,
          children: convert(answer.conditionalSection - 1),
        })),
  }))

console.log(JSON.stringify(convert(0)))

const entry = [
  {
    id: 1,
    entitled: 'first question',
    questions: [
      {
        id: 1,
        entitled: 'Do you have a car ?',
        answers: [
          { id: 1, entitled: 'Yes', conditionalSection: 2 },
          { id: 2, entitled: 'No', conditionalSection: 3 },
        ],
      },
    ],
  },
  {
    id: 2,
    entitled: 'section yes',
    questions: [
      {
        id: 1,
        entitled: 'Do you have an electric car ?',
        answers: [
          { id: 1, entitled: 'Yes', conditionalSection: 4 },
          { id: 2, entitled: 'No', conditionalSection: 4 },
        ],
      },
    ],
  },
  {
    id: 3,
    entitled: 'section no',
    questions: [
      {
        id: 1,
        entitled: 'Do you have a bicycle ?',
        answers: [
          { id: 1, entitled: 'Yes', conditionalSection: 4 },
          { id: 2, entitled: 'No', conditionalSection: 4 },
        ],
      },
    ],
  },
  {
    id: 4,
    entitled: 'end',
    questions: [
      {
        id: 1,
        entitled: 'Do you have any comments ?',
      },
    ],
  },
]