{"id":1688,"date":"2021-04-05T06:35:26","date_gmt":"2021-04-05T06:35:26","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/use-knockoutjs-foreach-in-magento-2\/"},"modified":"2025-07-17T09:27:41","modified_gmt":"2025-07-17T03:57:41","slug":"use-knockoutjs-foreach-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/use-knockoutjs-foreach-in-magento-2\/","title":{"rendered":"How to Use KnockoutJS Foreach in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Knockout JS is a Javascript library that allows you to create dynamic interfaces and implements the MVVM(Model-View-View Model) pattern to bind data to certain DOM elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find KnockoutJS almost on every page, but the checkout page is the place where Knockout is used the most.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Although applying KnockoutJS is one of the most tricky and complicated tasks in\u00a0Magento 2\u00a0for developers, it makes your code more powerful as it allows you to add a great deal of seamless functionality to your store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<a href=\"https:\/\/developer.adobe.com\/commerce\/frontend-core\/ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">foreach binding<\/a>&nbsp;duplicates a section of markup for each entry in an array and binds each copy of that markup to the corresponding array item.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, if you want to add more than one custom rate with different titles in the sidebar of the cart page. In that scenario, you have to&nbsp;<em><strong>use knockoutJS foreach in Magento 2.<\/strong><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the below example to learn the KnockoutJS foreach.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Use KnockoutJS Foreach in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Use the below code in your&nbsp;<strong>.html<\/strong>&nbsp;file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- ko foreach: { data: getDetails(), as: 'item' } -->\n&lt;tr class=\"totals sub\">\n    &lt;th data-bind=\"text: item.id\" class=\"mark\" scope=\"row\">&lt;\/th>\n    &lt;td class=\"amount\">\n        &lt;span class=\"price\" data-bind=\"text: item.price\">&lt;\/span>\n    &lt;\/td>\n&lt;\/tr>\n&lt;!-- \/ko --><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Use the below code in your&nbsp;<strong>.js<\/strong>&nbsp;file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define([\n    'ko',\n    'jquery',\n    'uiComponent',\n    'Magento_Checkout\/js\/model\/quote'\n], function(ko, $, Component, quote) {\n    'use strict';\n    return Component.extend({\n\n            getDetails: function() {\n                array allItem = [\n                    {\n                        id : '1',\n                        price : '120'\n                    },\n                    {\n                        id : '2',\n                        price : '150'\n                    }\n                ];\n            return allItem;\n            }\n        });\n    }\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Use this solution wherever you need to use knockoutJs foreach loop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, do share the post with Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Knockout JS is a Javascript library that allows you to create dynamic interfaces and implements the MVVM(Model-View-View Model) pattern to bind data to certain DOM elements. You can find KnockoutJS almost on every page, but the checkout page is the place where Knockout is used the most. Although applying KnockoutJS is one of the most [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1688","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1688\/revisions"}],"predecessor-version":[{"id":18148,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1688\/revisions\/18148"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}