Dynamic Compiled Template Not Showing

I am developing a mobile application using Framework 7 and Template 7. I am stuck at a point, I am requesting data through ajax request, and successfully able to retrieve the data, however, I am not able to print the data using for each loop Template.

HTML Part:

<script type="text/template" id="takeOrderPage">

<!-- pages -->
<div class="pages">
    <div data-page="takeorder" class="page">
        <div class="page-content">
            <div class="app-pages">

                <!-- popular product -->
                <div class="product popular app-section">
                    <div class="container">
                        <div class="app-title">
                            <h4>Take Order</h4>
                            <p>Take Your Order Here</p>
                        </div>
                        <div class="row">
                            <select id="party">
        {{#each list}}
        <option value="{{party_id}}">{{party_name}}</option>
        {{/each}}
        </select>
                                <input id="sdfgf" type="text" class="validate custom-text" placeholder="Party Name">
                                <input type="hidden" value="" name="order_latt" id="order_latt">
                                <input type="hidden" value="" name="order_long" id="order_long">
                                <input type="hidden" value="" name="order_location" id="order_location">
                        </div>
                        <div class="row">
                                <input id="order_products" type="text" class="validate custom-text" placeholder="Order Products">
                        </div>
                        <div class="row">
                                <input id="required_date" type="text" class="validate custom-text" placeholder="Required Date">
                        </div>
                        <div class="row">
                            <textarea name="remarks" id="remarks" class="validate custom-text" placeholder="Remarks"></textarea>
                        </div>
                        <div class="row">
                            <input id="takeorder" type="button" class="validate" value="Take Order">
                        </div>
                    </div>
                </div>
                <!-- end popular product -->

                <!-- footer -->
                <footer>
                    <div class="container">
                        <h6>Find & follow us</h6>
                        <ul class="icon-social">
                            <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="google"><a href="#"><i class="fa fa-google"></i></a></li>
                            <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
                            <li class="rss"><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                        <div class="tel-fax-mail">
                            <ul>
                                <li><span>Tel:</span> 900000002</li>
                                <li><span>Fax:</span> 0400000098</li>
                                <li><span>Email:</span> [email protected]</li>
                            </ul>
                        </div>
                        <div class="ft-bottom">
                            <span>Copyright © 2018 All Rights Reserved </span>
                        </div>
                    </div>
                </footer>
                <!-- end footer -->

            </div>
        </div>
    </div>
</div>
<!-- end pages -->
                </script>

jQuery Part:

var template = $$('#takeOrderPage').html();

// Compile and render
var compiledTemplate = Template7.compile(template);
// Callbacks to run specific code for specific pages, for example for About page:
myApp.onPageInit('takeorder', function (page) {
    $$.post('business-logic.php', {party: 'fillpartydetails'}, function (data) {
        if (data)
        {
            var data = JSON.parse(data);
            console.log(data);
            var html = compiledTemplate(data);
        }
    }); });

Json I am receiving:

{list: Array(10)}
list
:
Array(10)
0
:
{party_id: "2", party_code: "1001010001", party_name: "A D COLLEGE", party_group: "80", party_group_description: "Others", …}
1
:
{party_id: "3", party_code: "1001010002", party_name: "ANA BEHERA, BHAWANIPATNA", party_group: "80", party_group_description: "Others", …}
2
:
{party_id: "4", party_code: "1001010003", party_name: "ANA KNA PANIGRAHI,RAYGADA", party_group: "80", party_group_description: "Others", …}
3
:
{party_id: "5", party_code: "1001010004", party_name: "ANA KNA RATH,  CHANDIKHOL", party_group: "80", party_group_description: "Others", …}
4
:
{party_id: "6", party_code: "1001010005", party_name: "ANAKNA AGENCIES(CUTTACK)", party_group: "80", party_group_description: "Others", …}
5
:
{party_id: "7", party_code: "1001010006", party_name: "ANAKNA RANA, BALICHANDRAPUR", party_group: "80", party_group_description: "Others", …}
6
:
{party_id: "8", party_code: "1001010007", party_name: "ANARNACNA CONAOPNASTORE (CHARBATIA)", party_group: "80", party_group_description: "Others", …}
7
:
{party_id: "9", party_code: "1001010008", party_name: "ABHISEKH ENTERPRISES, (BIRAMITRAPUR)", party_group: "05", party_group_description: "Domestic Inside Odisha (ZONE-03, SM)", …}
8
:
{party_id: "10", party_code: "1001010009", party_name: "ABIT COLLEGE, CUTTACK", party_group: "80", party_group_description: "Others", …}
9
:
{party_id: "11", party_code: "1001010010", party_name: "ADIKANDA BHUTIA", party_group: "01", party_group_description: "Domestic Inside Odisha (ZONE-01,BP)", …}
length
:
10
__proto__
:
Array(0)
__proto__
:
Object

HTML Part:

<script type="text/template" id="takeOrderPage">

<!-- pages -->
<div class="pages">
    <div data-page="takeorder" class="page">
        <div class="page-content">
            <div class="app-pages">

                <!-- popular product -->
                <div class="product popular app-section">
                    <div class="container">
                        <div class="app-title">
                            <h4>Take Order</h4>
                            <p>Take Your Order Here</p>
                        </div>
                        <div class="row">
                            <select id="party">
        {{#each list}}
        <option value="{{party_id}}">{{party_name}}</option>
        {{/each}}
        </select>
                                <input id="sdfgf" type="text" class="validate custom-text" placeholder="Party Name">
                                <input type="hidden" value="" name="order_latt" id="order_latt">
                                <input type="hidden" value="" name="order_long" id="order_long">
                                <input type="hidden" value="" name="order_location" id="order_location">
                        </div>
                        <div class="row">
                                <input id="order_products" type="text" class="validate custom-text" placeholder="Order Products">
                        </div>
                        <div class="row">
                                <input id="required_date" type="text" class="validate custom-text" placeholder="Required Date">
                        </div>
                        <div class="row">
                            <textarea name="remarks" id="remarks" class="validate custom-text" placeholder="Remarks"></textarea>
                        </div>
                        <div class="row">
                            <input id="takeorder" type="button" class="validate" value="Take Order">
                        </div>
                    </div>
                </div>
                <!-- end popular product -->

                <!-- footer -->
                <footer>
                    <div class="container">
                        <h6>Find & follow us</h6>
                        <ul class="icon-social">
                            <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="google"><a href="#"><i class="fa fa-google"></i></a></li>
                            <li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
                            <li class="rss"><a href="#"><i class="fa fa-rss"></i></a></li>
                        </ul>
                        <div class="tel-fax-mail">
                            <ul>
                                <li><span>Tel:</span> 900000002</li>
                                <li><span>Fax:</span> 0400000098</li>
                                <li><span>Email:</span> [email protected]</li>
                            </ul>
                        </div>
                        <div class="ft-bottom">
                            <span>Copyright © 2018 All Rights Reserved </span>
                        </div>
                    </div>
                </footer>
                <!-- end footer -->

            </div>
        </div>
    </div>
</div>
<!-- end pages -->
                </script>

Do you see any errors in console? For me it looks correct, the only question i see you compile a template and save it to html var, but what is next, do you updated the DOM with it?

Yes, I have used for each loop in the front-end to print the data. Here is how I have done it:

{{#each list}} {{party_name}} {{/each}} If I console.log the html var, It prints the complete html with populated data, Only problem is in real window it is only a blank dropdown.

Still It is not working…

Why it should be not empty. I see you only compile template to the string but you didn’t update it anywhere

Can you please suggest, how do I do it?