Use variables outside of loop

Hi! I have a code in edge template:

      @if(field.type == 'checkbox')
          <fieldset id="{{ field.name }}">
            @each(checkBoxItem in field.data)
              <span class="checkbox-item">
                <input type="checkbox" id="{{ checkBoxItem.name }}" name="{{ field.name }}" value="{{ checkBoxItem.value }}" {{ checkBoxItem.checked ? "checked" : "" }}>
                <label for="{{ checkBoxItem.name }}">{{ checkBoxItem.title }}</label>
              </span>
            @endeach
          </fieldset>
      @endif

When I use ‘field.name’ outside of @each loop, it works fine, but when I use it inside a loop, it renders as ‘undefined’.

P.S. Wanna say thanks to all people who are working with Adonis, Edge and all ecosystem, it’s really cool.

[thetutlage]

Ohh yeah, I believe it is not documented well, but for nested values, you make use of $parent keyword.

So it should be

$parent.field.name

[PazzaVlad]

@thetutlage thanks for reply

I’ve tried your example, and it works well. Here is my full template that produce given error. I guess this issue occurred when using nested loops.

Template:

@layout('dashboard/layout')

@section('content')

<form class="forms" method="post">

  @each(field in fields)
  <div class="content-block">
    <div class="field {{ field.type }} {{ field.required ? "required" : "" }}">
    <h2 class="title"> {{ field.title }}</h2>
    <div class="description">{{ field.description }}</div>

      {{--  Text fields  --}}
      @if(field.type == 'text')
          <input type="text" name="{{ field.name }}" {{ field.required ? "required" : "" }} value="{{ field.value ? field.value : "" }}" >
      @endif

      {{--  Number fields  --}}
      @if(field.type == 'number')
          <input type="number" id="{{ field.name }}" name="{{ field.name }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}" value="{{ field.value ? field.value : "" }}" {{ field.required ? "required" : "" }} />
      @endif

      {{--  Textarea fields  --}}
      @if(field.type == 'textarea')
          <textarea name="{{ field.name }}" cols="{{ field.cols }}" rows="{{ field.rows }}" {{ field.required ? "required" : "" }}>{{ field.value ? field.value : "" }}</textarea>
      @endif

      {{--  Radio buttons fields  --}}
      @if(field.type == 'radio')
          <fieldset id="{{ field.name }}">
            @each(radioItem in field.data)
              <span class="radio-item">
                <input type="radio" id="{{ radioItem.name }}" name="{{ field.name }}" value="{{ radioItem.value }}" {{ field.checked ? "checked" : "" }} {{ field.required ? "required" : "" }}>
                <label for="{{ radioItem.name }}">{{ radioItem.title }}</label>
              </span>
            @endeach
          </fieldset>
      @endif

      {{--  Checkbox fields  --}}
      @if(field.type == 'checkbox')
          <fieldset id="{{ field.name }}">
            @each(checkBoxItem in field.data)
              <span class="checkbox-item">
                <input type="checkbox" id="{{ checkBoxItem.name }}" name="{{ field.name }}" value="{{ checkBoxItem.value }}" {{ checkBoxItem.checked ? "checked" : "" }}>
                <label for="{{ checkBoxItem.name }}">{{ checkBoxItem.title }}</label>
              </span>
            @endeach
          </fieldset>
      @endif

      {{--  Select fields  --}}
      @if(field.type == 'select')
          <select name="{{ field.name }}" id="{{ field.name }}" {{ field.required ? "required" : "" }} {{ field.multiple ? "multiple" : 0 }}> 
            @each(selectItem in field.data)
              <option value="{{ selectItem.value }}" {{ field.selected ? "selected" : "" }}>{{ selectItem.title }}</option> 
            @endeach
          </select>
      @endif

      {{--  Range fields  --}}
      @if(field.type == 'range')
          <input type="range" id="{{ field.name }}" name="{{ field.name }}" min="{{ field.min }}" max="{{ field.max }}" step="{{ field.step }}" value="{{ field.value }}" oninput="{{ field.name }}_output.value = {{ field.name }}.value" />
          <output name="{{ field.name }}_output" id="{{ field.name }}_output">{{ field.value }}</output>
      @endif

    </div>
  </div>
  @endeach

  {{ csrfField() }}
  
  <input type="submit" value="Отправить">
</form>
@endsection

Controller:

return view.render('dashboard/fields', {
      fields: 
     [
      {
        type: "radio",
        name: "gadget_type",
        title: "Тип устройства",
        description: "Выбериты тип устройства",
        required: true,
        data: [
          { name: "smartphone", title: "Смартфон", value: "smartphone" },
          { name: "phablet", title: "Фаблет", value: "phablet" },
          { name: "phone", title: "Телефон", value: "phone" },
        ]
      },
    ]
    })

output:

     <fieldset id="gadget_type">
              <span class="radio-item">
                <input type="radio" id="smartphone" name="undefined" value="smartphone"  >
                <label for="smartphone">Смартфон</label>
              </span>
              <span class="radio-item">
                <input type="radio" id="phablet" name="undefined" value="phablet"  >
                <label for="phablet">Фаблет</label>
              </span>
              <span class="radio-item">
                <input type="radio" id="phone" name="undefined" value="phone"  >
                <label for="phone">Телефон</label>
              </span>
          </fieldset>