Nested lists with doT.js (from nested arrays/objects)

Question

Is there a way to generate nested lists with doT.js? Unfortunately, my code traverses only the first object in the array (g1) and ignores all following. Is there any way to solve this with doT.js?

The result should look like:

G1
 T11
 T12
 T13
G2
 T21
 T22
 T23

$(document).ready(function() {
  var data_simple = {
    level1: [{
      name: 't1'
    }, {
      name: 't2'
    }, {
      name: 't3'
    }]
  };

  var data_complex = {
    level1: [{
      name: 'g1',
      data: [{
        name: 't11'
      }, {
        name: 't12'
      }, {
        name: 't13'
      }]
    }, {
      name: 'g2',
      data: [{
        name: 't21'
      }, {
        name: 't22'
      }, {
        name: 't23'
      }]
    }]
  };

  var compiled_tpl_simple = doT.template($('[data-template="simple"]').html());
  var compiled_tpl_complex = doT.template($('[data-template="complex"]').html());
  
  var result_simple = compiled_tpl_simple(data_simple);
  var result_complex = compiled_tpl_complex(data_complex);

  $('#output_simple').append(result_simple);
  $('#output_complex').append(result_complex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script data-template="simple" type="text/x-dot-template">
 <strong>Beg simple</strong><br>
 {{~it.level1 :element:index}}
  {{=element.name}}<br>
 {{~}}
  <strong>End simple</strong>
</script>

<script data-template="complex" type="text/x-dot-template">
 <strong>Beg complex</strong><br>
 {{~it.level1 :group:index}}
     {{=group.name}}<br>
      {{~group.data :element:index}}
     {{=element.name}}<br>
      {{~}}
 {{~}}
  <strong>End complex</strong>
</script>

<div id="output_simple">

</div>
<div id="output_complex">

</div>

https://jsfiddle.net/srw2ogpz/

Answer 1

For resolving this problem change index name in nested list.

<script data-template="complex" type="text/x-dot-template">
<strong>Beg complex</strong><br>
{{~it.level1 :group:index}}
   {{=group.name}}<br>
   {{~group.data :element:index2}}
      {{=element.name}}<br>
   {{~}}
{{~}}
<strong>End complex</strong>
</script>