Dynamic String Interpolation for variable output in angular

Question

I need to mix the answers to Quiz-Questions in random order.

I have Question objects like:

Question = {
    question: 'what is the capital of Germany?',
    answer1: 'Berlin',
    answer2: 'London',
    answer3: 'Paris',
    answer4: 'Rome'
}

Every time I display the Question in the template I generate a random array e.g.

randomOrder = [3,2,0,1]

I want to use string interpolation in the template to show the question with random Order of the answers:

Question: {{Question.question}}<br>
Answer1: {{Question.answer'answerOrder[0]'}}<br>
Answer2: {{Question.answer'answerOrder[1]'}}<br>
Answer3: {{Question.answer'answerOrder[2]'}}<br>
Answer4: {{Question.answer'answerOrder[3]'}}<br>

Can someone help me with the correct syntax for angular?

luiscla27 · Accepted Answer · 2021-11-26 17:44:12Z

1

A better aproach is to get a method to return the composed string, using string interpolation, like for example:

questionString(n: number): string {
   return `Answer${n+1}: ${questions['answer'+n]}`;
}

And use, for example:

{{question(1)}}
{{question(2)}}
...

Or better than, inside a for a loop.

edited Nov 26, 2021 at 17:44

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered Apr 1, 2021 at 20:10

Juan Antonio

2,6634 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

luiscla27 · Accepted Answer · 2021-11-26 17:44:38Z

1

Just refer to object by a dynamic key;

Question: {{Question.question}}
Answer1: {{Question['answer'+answerOrder[0]]}}
Answer2: {{Question['answer'+answerOrder[1]]}}

Or you could store answers as array like this: {question: '...', answers: [a,b,c,d]}

edited Nov 26, 2021 at 17:44

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered Apr 1, 2021 at 20:04

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

1 Comment

Joe Over a year ago

Thanks, this is exactly the syntax I was looking for.

Collectives™ on Stack Overflow

Dynamic String Interpolation for variable output in angular

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related