topic Re: How to print nested content in CMS Development

How to print nested content

Mrafey — Mon, 11 Mar 2024 21:42:40 GMT

Hello!

I have the following structure in the design manager:

The slides field group has repeater option set to 3. So it prints out 3 questions in which each has a question text property followed by an answers group field which has its repeater options set to 3 as well which outputs 3 answers for a given question.

My issue is I am having a hard time figuring out how to access those nested answers for each question.

This is what I have thus far:

<div class="quiz"> <form class="quiz-form"> {% for item in module.slides %} <div class="question"> <h3>{{item.question}}</h3> {% for answer in slides.answers %} <label>Print</label> <input type="radio"/> {% endfor %} </div> {% endfor %} <div class="submit-btn"> <input type="submit" class="button"/> </div> </form> </div>

Based on what I have setup 3 radio buttons with the label Test should print out for each question, but that doesn't seem to happen. I am still new to HubL and I feel I am doing the nesting incorrectly.

Some help regarding this would be great!

Thanks!

Re: How to print nested content

Jaycee_Lewis — Tue, 12 Mar 2024 18:30:27 GMT

Hi, @Mrafey 👋 Thanks for your question! I'd like to invite some of our community members to the conversation hey @Stephanie-OG @MBERARD @arinker, do you have any tips you can share with @Mrafey?

Thank you for taking a look! — Jaycee

Re: How to print nested content

MattPickle — Tue, 12 Mar 2024 18:51:10 GMT

This should do it. Within the loop, you access the fields for each answer group with {{ answer.<fieldname> }}.

{% for answer in slides.answers %} <label>{{ answer.answer_label }}</label> <input type="radio" name="{{ answer.answer_name }}" value="{{ answer.answer_value }}"/> {% endfor %}

Re: How to print nested content

Stephanie-OG — Tue, 12 Mar 2024 18:54:39 GMT

Hi @Mrafey - if you hover over the "Slides" field group and click on Actions > Copy Snippet, it should give you the code.

But basically if Slides is a repeater, when you have

{% for item in module.slides %}

you're now within "item", so to get the Answers you would need to have:

{% for answer in item.slides %}

Something like this should work:

<div class="quiz"> <form class="quiz-form"> {% for item in module.slides %} <div class="question"> <h3>{{ item.question }}</h3> {% for answer in item.answers %} <label>{{ answer.answer_label }}</label> <input type="radio"/> {% endfor %} </div> {% endfor %} <div class="submit-btn"> <input type="submit" class="button"/> </div> </form> </div>

I hope that helps!

Re: How to print nested content

Mrafey — Tue, 12 Mar 2024 20:45:52 GMT

Thank you, it works!