{"id":141085,"date":"2018-08-31T14:12:31","date_gmt":"2018-08-31T14:12:31","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=141085"},"modified":"2024-03-26T09:53:15","modified_gmt":"2024-03-26T09:53:15","slug":"using-loop-in-templates-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/","title":{"rendered":"Using loop in templates magento 2"},"content":{"rendered":"\n<p>Instead of writing the HTML in string and then printing the output, it is better to use templates that are efficient in many ways and easy to use once you get the hang of it; especially when you need to use loops like printing data in table, etc. in <a href=\"https:\/\/store.webkul.com\/Magento-2.html\">magento 2<\/a>.<\/p>\n\n\n\n<p>First, write the template in your phtml file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;script id=&quot;options-template&quot; type=&quot;text\/x-magento-template&quot;&gt;\n    &lt;table class=&quot;data-grid data-grid-draggable&quot;&gt;\n        &lt;thead&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;input type=&#039;checkbox&#039;&gt;&lt;\/td&gt;\n                &lt;td&gt;Title&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            &lt;% _.each( target, function(i) {%&gt;\n                &lt;tr class=&quot;data-row&quot;&gt;\n                    &lt;td class=&#039;wk-tab-check&#039;&gt;&lt;input type=&#039;checkbox&#039; value=&#039;&lt;%= i.value %&gt;&#039; class=&#039;checkbox&#039; name=&quot;checkbox&#091;]&quot;&gt;\n                    &lt;td class=&#039;wk-tab-title&#039;&gt;&lt;input type=&#039;text&#039; name=&#039;title-&lt;%= i.value %&gt;&#039; id=&#039;title-&lt;%= i.value %&gt;&#039; value=&#039;&lt;%= i.label %&gt;&#039;\/&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;% }); %&gt;\n        &lt;\/tbody&gt;\n    &lt;\/table&gt;\n&lt;\/script&gt;<\/pre>\n\n\n\n<p>Write a div to print the output.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;div id=&quot;output&quot;&gt;&lt;\/div&gt;<\/pre>\n\n\n\n<p>As you can see, each loop has been used to print the data in repeatedly.<\/p>\n\n\n\n<p>Suppose the data is in array form<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">Array\n(\n    &#091;1] =&gt; Array\n        (\n            &#091;value] =&gt; 1\n            &#091;label] =&gt; Bitter\n        )\n\n    &#091;2] =&gt; Array\n        (\n            &#091;value] =&gt; 2\n            &#091;label] =&gt; Sour\n        )\n\n    &#091;3] =&gt; Array\n        (\n            &#091;value] =&gt; 3\n            &#091;label] =&gt; Sweet\n        )\n\n)<\/pre>\n\n\n\n<p>Now in the js file, prepare the data to print.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">require(&#091;\n&#039;jquery&#039;,\n&#039;underscore&#039;,\n], function ($, _) {\n    var data = { target:response };\n    var template = _.template( $(&quot;#options-template&quot;).text() );\n    $(&quot;#output&quot;).html( template(data) );\n});<\/pre>\n\n\n\n<p>This will print the data in loop like shown in the picture<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"427\" height=\"238\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\" alt=\"paul_blog_loop_template\" class=\"wp-image-424314\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png 427w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template-300x167.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template-250x139.png 250w\" sizes=\"(max-width: 427px) 100vw, 427px\" loading=\"lazy\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Instead of writing the HTML in string and then printing the output, it is better to use templates that are efficient in many ways and easy to use once you get the hang of it; especially when you need to use loops like printing data in table, etc. in magento 2. First, write the template <a href=\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":164,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[],"class_list":["post-141085","post","type-post","status-publish","format-standard","hentry","category-magento2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using loop in templates magento 2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using loop in templates magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-31T14:12:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-26T09:53:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\" \/>\n<meta name=\"author\" content=\"Paul Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul Dutta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\"},\"author\":{\"name\":\"Paul Dutta\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748\"},\"headline\":\"Using loop in templates magento 2\",\"datePublished\":\"2018-08-31T14:12:31+00:00\",\"dateModified\":\"2024-03-26T09:53:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\"},\"wordCount\":114,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\",\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\",\"name\":\"Using loop in templates magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\",\"datePublished\":\"2018-08-31T14:12:31+00:00\",\"dateModified\":\"2024-03-26T09:53:15+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png\",\"width\":427,\"height\":238,\"caption\":\"paul_blog_loop_template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using loop in templates magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748\",\"name\":\"Paul Dutta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Paul Dutta\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/paul-dutta287\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using loop in templates magento 2 - Webkul Blog","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Using loop in templates magento 2 - Webkul Blog","og_description":"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.","og_url":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-08-31T14:12:31+00:00","article_modified_time":"2024-03-26T09:53:15+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png","type":"","width":"","height":""}],"author":"Paul Dutta","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Paul Dutta","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/"},"author":{"name":"Paul Dutta","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748"},"headline":"Using loop in templates magento 2","datePublished":"2018-08-31T14:12:31+00:00","dateModified":"2024-03-26T09:53:15+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/"},"wordCount":114,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png","articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/","url":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/","name":"Using loop in templates magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png","datePublished":"2018-08-31T14:12:31+00:00","dateModified":"2024-03-26T09:53:15+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/paul_blog_loop_template.png","width":427,"height":238,"caption":"paul_blog_loop_template"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/using-loop-in-templates-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using loop in templates magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/41a945ef9d13b037b8483b2340ae6748","name":"Paul Dutta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/57d5fe0b5f0a7db7ce6bf447f403ff0c10c3d2e234e4a8398a8fe1daa71888b2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Paul Dutta"},"url":"https:\/\/webkul.com\/blog\/author\/paul-dutta287\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/141085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/164"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=141085"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/141085\/revisions"}],"predecessor-version":[{"id":429501,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/141085\/revisions\/429501"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=141085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=141085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=141085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}