I want to add a custom UI component template on the cart page. The data is in JSON format and wants to bind forach to display a list of data.

data like as

{'name':'5% discount','description':'5% off on purchase','coupon':'WINTEROFF5'},{'name':'15% off','description':'15% off auto-generated coupons','coupon':'WINTEROFF15'}

following error as I got

Uncaught TypeError: Unable to process binding "foreach: function(){return { data:getCouponList(),as:'coupon'} }"

2 Answers 2


I assume you are using a custom module name "Compnay_MyModule"

Step 1) app/code/Compnay/MyModule/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.cart.shipping">                          
                 <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="block-summary" xsi:type="array">                                                
                            <item name="children" xsi:type="array">
                        <item name="config" xsi:type="array">                        
                                   <item name="component"  xsi:type="string">Company_MyModule/js/view/cart/myitems</item>                        
                                      <item name="sortOrder" xsi:type="string">3</item>

Step 2) /app/code/Compnay/MyModule/view/frontend/web/js/view/cart/myitems.js


    ], function($,Component, ko) {

        var itemList = ko.observableArray();   
        return Component.extend({   
             defaults: {
                template: 'Company_MyModule/myList'
             title:'My Items List',      
             initialize: function(){
                 return this;
             populateMyItems: function(){
                 var self =  this;               
                     {'name':'5% discount','description':'5% off on purchase','coupon':'WINTEROFF5'},
                     {'name':'15% off','description':'15% off auto-generated coupons','coupon':'WINTEROFF15'}


Step 3) /app/code/Compnay/MyModule/view/frontend/web/template/myList.html

<h2 data-bind="text: title"></h2>
   <tbody data-bind="foreach: itemList">
          <td data-bind="text: $index"></td>
          <td data-bind="text: $data.name"></td>
          <td data-bind="text: $data.description"></td>

== Demo ====

enter image description here


First you should check template (html) and your component (js) Post your html bind here will be easier for know what exactly problem

The common case foreach in ko html


<!-- ko foreach: { data: getCouponList(), as: 'coupon' } -->
    <span class="coupon-name" data-bind="text: coupon.name"></span>
<!-- /ko -->

in your component (js) should have function getCouponList

  • tried this but not working Dec 26, 2019 at 11:08
  • post/update your snippet where you binding will be helpful for other can help you
    – mrtuvn
    Dec 26, 2019 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.