How to data-bind in Knockout js in magento 2 like css, json, foreach ,json to array, string to array , array index field

 

How to data-bind in Knockout js in magento 2 like css, json foreach, json to array, string to array , array index field etc.

Hello magento friends in this blog post im share with you to guys How to data-bind in Knockout js in magento 2 like css, json foreach, json to array, string to array , array index field etc lets get startted : 

In this post i'm cover to : 

1. data-bind in Knockout js 
2. css in Knockout js 
3. json in Knockout js 
4. foreach in Knockout js 
5. json to array in Knockout js 
6. string to array in Knockout js 
7. array index field in Knockout js 
8. array in Knockout js 

Bellow code is use to add css in knockout js

 

<div data-bind="style:{margin:'4px 0px'}">

    <span data-bind="html: colorkeys[$index()]"> </span> :<br/>

</div>

👉How To Convert JSON to Array in Knockout JS 

Bellow code is use to Convert JSON to Array in Knockout JS

 <!-- ko foreach: {data: JSON.parse(option.value), as: '_task' } -->

 <!--  /ko -->

 

👉How to Convert String To Array in Knockout JS : 

Bellow code is use to Convert String To Array in Knockout JS

I'm convert value is #ffffff,#000000

<!-- ko foreach:{data: Array(Object.keys(_task)), as: 'colorkeys' } -->

 <!--  /ko -->

👉 How to print all data in array using foreach in knockoutjs in magento

 <!-- ko foreach:{data: Array(Object.keys(_task)), as: 'colorkeys' } -->

 <div data-bind="foreach: $data ">

    <div data-bind="style:{margin:'4px 0px'}">

        <span data-bind="html: colorkeys[$index()]"> </span> :<br/>

    </div>

</div>

<!--  /ko -->

Over all I Bellow are mixed code to data-bind in knockout js and what is output i'm find : 

This is Json Data to I get Bellow Screenshot output : 

 $part= '{"face": "#FFF333", "Accent": "#f00","Deepak": "#46F300","Mageget": "#0007F3"}';

 

<!-- ko foreach: {data: JSON.parse(option.value), as: '_task' } -->

<table>

    <tbody>

      <tr>

        <td>

          <!-- ko foreach:{data: Array(Object.keys(_task)), as: 'colorkeys' } -->

          <div data-bind="foreach: $data ">

            <div data-bind="style:{margin:'4px 0px'}">

              <span data-bind="html: colorkeys[$index()]"></span> : <br />

            </div>

          </div>

          <!--  /ko -->

        </td>

        <td>

          <!-- ko foreach:{data: Array(Object.values(_task)), as: 'colorvalues' } -->

          <div data-bind="foreach: $data ">

            <div data-bind="style:{width:'70px',margin:'4px 0px',background:colorvalues[$index()]}">

              <span data-bind="html: colorvalues[$index()]"></span>

              <br />

            </div>

          </div>

          <!--  /ko -->

        </td>

      </tr>

    </tbody>

  </table>

  <!-- /ko -->