Rendering a dynamic survey

Question

I want an opinion for the following scenario:

I have a survey with questions and answers:

questions: Question[];
answer: Answer[];

Where Question is:

export class Question {
    idQuestion: string;
    question: string;
}

export class Answer {
    idAnswer: string;
    answer: string;
    idQuestion: string;
    type: string; // inputbox - select - etc
}

Currently I can render questions and answer separately:

<ul *ngFor="let question of questions;">
    <li>
        <a id="{{question.idQuestion}}">{{question.question}}</a>
    </li>
</ul>
<ul *ngFor="let answer of answers;">
    <li>
        <a id="{{respuesta.idAnswer}}">{{answer.answer}}</a>
    </li>
</ul>

But I want to render it in the way:

question1: answer;
question2: answer;
question3: select;

How can I face the problem? Is there any pattern in Angular2? I want to avoid the hardcoding of the html from the ts looping in the question and finding the answer.

You should check this [How can I use/create dynamic template to compile dynamic Component with Angular 2.0?](http://stackoverflow.com/q/38888008/1679310) - that's how we do create very dynamic content, driven by some business metadata (e.g. about question type, answer type) — Radim Köhler, Oct 27 '16 at 15:13

JonasMH · Accepted Answer · 2016-10-27T15:21:18.103

Two options from the top of my head:

Map

Either map the question and answer together in TS and then display them using one loop:

let questionsAndAnswers =
    questions.map(question => {question:question, answer: answers.find((answer) => answer.idQuestion === question.idQuestion)})

This will give you an array of tubles containing the answer and quiestion. In html you can then do like so:

<ul *ngFor="let questionTuble of questionsAndAnswers ;">
    <li>
        <a id="{{question.idQuestion}}">{{questionTuble.question.question}}:{{questionTuble.answer.answer}}</a>
    </li>
</ul>

Change model

This is the solution i would properly choose:

Change your question model to include the answer, and remove the questionId from answer. In my opinion this improves read-ability in the html:

<ul *ngFor="let question of questions;">
    <li>
        <a id="{{question.idQuestion}}">{{question.question}}:{{question.answer.answer}}</a>
    </li>
</ul>

And to further improve readability i would re-name the 'question' property of question to text or something similar

(Note, haven't tested these, so there may be some syntax errors)

Rendering a dynamic survey

1 Answers1

Linked