How to write JavaScript template in Magento2

How to write JavaScript template in Magento2 :

Magento 2 JavaScript Template is known as a standard template to help developers to quickly make HTML code that is repeated many times while only data is different. Therefore, creating a template will help developers to write code snippets quicker, save more time than before.

If want to append a clone of your html code on any event with different value then it will be the best practice to use JavaScript template , So in this post, I will show you a Magento 2 JavaScript tutorial: the best way to create a JavaScript template. Follow the steps below and quickly create a template for your own.

Include  JavaScript template to your phtml file –

<button id="customer-button">
    <span>Click Here to get customer data</span>
</button>
<div id ="customer-container">
    <script id="customer-template" type="text/x-magento-template">
        <ul id="<%- data.id %>">
            <li>
                Name : <%- data.name %>
            </li>
            <li>
                Salary : <%- data.salary %>
            </li>
            <li>
                Location : <%- data.location %>
            </li>
        </ul>
    </script>
</div>

2. Prepare Customer Data for setting in javascript template –

The data sample can be as below:

$customerData = [
    ['name' => "John Doe",
    'salary' => "1000 USD",
    'location' => "California"],
    ['name' => "Jane Doe",
    'salary' => "800 USD",
    'location' => "Florida"],
    ['name' => "Bob Doe",
    'salary' => "500 USD",
    'location' => "California"],
];
$jsonCustomerData = $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($customerData);

3. Write javascript code for appending data in your js template

        In the web/js folder, you create the jstemplate.js file and use the code below:

require([
    "jquery",
    'mage/template',
    "mage/mage"
], function ($, mageTemplate, alert){
    $('#customer-button').click(function(){
        $.each($.parseJSON('<?php echo $jsonCustomerData ?>'), function() {
            console.log('sss');
            var progressTmpl = mageTemplate('#customer-template'),
                      tmpl;
            tmpl = progressTmpl({
                data: {
                    name: this['name'],
                    salary: this['salary'],
                    location: this['location'],
                }
            });
            $('#customer-container').after(tmpl);
        });
    });
});

1. Now you will see a “button” and on click on this button customer data will be displayed as shown in the screenshot
   

*Note: Input data must be JSON type.

In this script, I use the .each () loop to retrieve data from the JavaScript file and use <ul>, <li>  tags in order to build a template.

By following all above steps in this Magento 2 JavaScript tutorial, you absolutely create a Magento 2 Javascript template on your own. Please Like, Share or Comment your thought if you have any issues. We are willing to discuss with you.

How to write JavaScript template in Magento2

You can also check :

https://webkul.com/blog/how-to-use-javascript-in-magento2/

https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/knockout-bindings.html