Create a tree with javascript and vuejs

Question

I would like to create a tree with javascript and vuejs https://fr.vuejs.org/v2/examples/tree-view.html I am young and i don't understand the algorithm well. I tried to make some loops but it's not recursive... My idea is to put in an object the questions and answers that belong to the conditional section.

My output like this:

{
  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 ?" }] },
          ],
        },
      ],
    },
  ],
};

and my 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 ?",
      }
    ],
  },
];

I don't know how i can write this properly...

ecoplaneteer · Accepted Answer · 2020-10-12 03:00:49Z

A recursive function is needed to convert entry to data like the output.

The full code snippet is just below.

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 ?',
      },
    ],
  },
]

Collectives™ on Stack Overflow

Create a tree with javascript and vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related