How to go back from all all inner #each loops

mein Jaan

I pass props to components from three each loops and in that component I used another each statement now I want back to th top of the data from all of the loop

zewar96

You can use the ../ operator to traverse back up the tree if you need to. So to go up 3 levels it would be ../../../variable

mein Jaan

{{#each formDetail.schema.pages as |page pageIndex|}}
{{#each sections as |section sectionIndex| }}
{{#each questions as |question questionIndex|}}  

     <div class="mb-2">
              {{component "./components/allQuestions/multiple-choice-answer"  
     choiceAnswer(findClassRoomDetail../../../formAnswerDetail)}}
                </div>

Now I multiple-choice-answer component I am using another #each for which I pass props

{{#each choiceAnswer as |answer answerIndex|}}

// Now I want to go back to top of my data but when I am going it give me undefined I tried this
<div>{{../../../../topFloor}}</div>

but giving undefined

jan_blaha

Not sure if this is a good approach. The component should be reusable and agnostic to from what context level it is called. You should pass to the component what it needs using parameters.

Like this, you can use the handlebars @root variable or as @zewar96 suggest the ../ operator to reach the root context.

{{component "multiple-choice-answer" formDetail=@root.formDetail}}

The you can use {{formDetail.topFloor}} in the component.

Not sure I understood your dataset properly, but hopefully you get the idea.