Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Using loop in templates magento 2

    Instead of writing the html in string and then printing the output, it better to use templates which are efficient in many ways and easy to use once you get the hang of it; specially when you need to use loops like printing data in table etc.

    First write the template in your phtml file

    <script id="options-template" type="text/x-magento-template">
        <table class="data-grid data-grid-draggable">
                    <td><input type='checkbox'></td>
                <% _.each( target, function(i) {%>
                    <tr class="data-row">
                        <td class='wk-tab-check'><input type='checkbox' value='<%= i.value %>' class='checkbox' name="checkbox[]">
                        <td class='wk-tab-title'><input type='text' name='title-<%= i.value %>' id='title-<%= i.value %>' value='<%= i.label %>'/></td>
                <% }); %>

    Write a div to print the output.

    <div id="output"></div>

    As you can see, each loop has been used to print the data in <tr> repeatedly.

    Suppose the data is in array form

        [1] => Array
                [value] => 1
                [label] => Bitter
        [2] => Array
                [value] => 2
                [label] => Sour
        [3] => Array
                [value] => 3
                [label] => Sweet

    Now in the js file, prepare the data to print.

    var data = { target:response };
    var template = _.template( $("#options-template").text() );
    $("#output").html( template(data) );

    This will print the data in loop like shown in the picture


    Happy coding 🙂


    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again