Magento 2 knockout js use JSON array inside JSON object

Question

Js Code :

getRowData: function() {
                    return  window.checkoutConfig.row_data;
                }

Knockout Code :

<!-- ko foreach: { data: getRowData(), as: 'rowdata' } -->
                <p data-bind="rowdata.rows.item"></p>// here i need rows key dynamic then how could i get it.
            <!-- /ko -->

I am facing some challenges to render this type of data in magento checkout page using knockout js.

{
"rows":[
     {"Item":2,"Odd or Even":"number 2 is even"}
],
"rows2":[
     {"Item":2,"Odd or Even":"number 2 is even"}
],
}

"rows" it will be dynamic and i am facing issue to get data by passing row key as dynamic in knockout js.

For example on checkout : I want to display row of Item value how could i get it. Any help would be appreciated.

Answer 1

To make the frontend update dynamically you'll need to store the data as a KO observable like so:

getRowData: function() {
    return  ko.observable(window.checkoutConfig.row_data);
}

And how you render it depends on what you need to show, something like this should work:

<p data-bind="text: rowdata.rows.item['Odd or Even']"></p>

I recommend not using spaces in properties, oddOrEven would be slighty easier to work with.