JSRender : Recursive Call to Parent Template

I have use-case wherein the input json can have n number of nested child objects and for that I want to display tree structure. Probably need to have some sort of a recursive rendering logic to achieve this. I am new to jsrender so can someone please help me with a sample code for my scenario.

Sample JSON which needs to be worked on:

{ "id": "1", "keys": [ { "name": "test1", "values": [ { "param_name": "abc" }, { "param_name": "def", "childObjects": [ { "actualvalue": "a1", "t2": "a2", "t3": "a3", "childObject": [ { "actualvalue": "a1", "t2": "a2", "t3": "a3" } ] }, { "actualvalue": "a4", "t5": "a5", "t6": "a6" } ] } ] } ] }

<script id="theContent" type="text/x-jsrender">
<div class="sec sec-middle">
{{for keys}}
{{for values}}
{{if childObjects}}
{^{tree/}}
{{/if}}
{{/for}}
{{/for}}
</div>
</script>

And the tree-if.js is as below:

    (function($) {
  "use strict";
  $.views.tags({
      tree: {
        template: '<div class="param-list parm-accord-level-one">' +
        '<div class="param-top-list">' +
            '<div class="parm-col parm-heading">' +
                '<a href="javscritp:void(0);" class="parm-accordion-title"><strong>{{:param_name}}</strong> <i class="far fa-angle-down"></i></a>' +
            '</div>' +
            '<div class="parm-col parm-description">' +
                '<span class="btn grey-btn string-btn">{{:data_type}}</span><span class="normal-text">{{:description}}</span>' +
            '</div>' +
        '</div>' +
        '<div class="parm-accordion-details">' +
            '<div class="tree-sec">' +
                '{{for childObjects}}' +
                    '{{if childObjects}}' +
                      '{{tree/}}' +
                    '{{else}}' +
                    '<div class="param-list">' +
                        '<div class="param-top-list">' +
                            '<div class="parm-col parm-heading">' +
                                '<span>{{:child_param_name}}</span>' +
                                '{{if isMandatory}}' +
                                    '<span class="seconday-text mandatory-text">mandatory</span>' +
                                '{{/if}}' +
                            '</div>' +
                            '<div class="parm-col parm-description">' +
                                '<span class="btn grey-btn string-btn">{{:child_data_type}}</span>' +
                                '<span class="string-text">{{:child_description}}</span>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '{{/if}}' +
                '{{/for}}' +
            '</div>' +
        '</div>' +    
    '</div>'
      }
    });
  })(this.jQuery);

There are some samples which illustrate recursive rendering of a hierarchical structure":

A JsViews "tree" tag control

And also this "jsonview" tag control sample, which is interactive, using JsViews, but a similar approach could be used just with JsRender.