knockout js , for each loop issue with custom array

I'm trying to get color_name from colors.standard.

I have try as given below html but both are showing same array.

HTML - not working

<div data-bind="foreach: { data: doorColorList, as: 'column' }">
    
    <span class="style-name" data-bind="text: name"></span>
        
    <div data-bind="foreach: { data: column.colors.standard, as: 'section' }">
        
            <p data-bind="text:console.log(section)"></p> 
      
    </div>
</div>

HTML Not Working

<div data-bind="foreach: { data: doorColorList, as: 'column' }">
        
    <span class="style-name" data-bind="text: name"></span>
        
    <div data-bind="foreach: { data: column.colors.standard, as: 'section' }">
        <div data-bind="foreach: { data: section, as: 'colorsection' }">
      
            <p data-bind="text:console.log(colorsection)"></p> 
        </div>
    </div>
</div>

Console JS Array:

{
    "style_id": "3",
    "name": "Rockford",
    "colors": {
        "standard": {
            "27": {
                "style_id": "3",
                "color_id": "27",
                "color_name": "White",
                "color_group": "1",
                "sort_order": "2",
                "defaultStyleId": "4"
            },
            "28": {
                "style_id": "3",
                "color_id": "28",
                "color_name": "Cloud White",
                "color_group": "1",
                "sort_order": "1",
                "defaultStyleId": "4"
            }
        },
        "doorcolor": {
            "18": {
                "style_id": "3",
                "cabinet_line_id": "1",
                "door_id": "1",
                "meta_keywords": null,
                "meta_description": null,
                "price_id": "3",
                "color_id": "18",
                "color_name": "Carbon",
                "color_group": "2",
                "sort_order": "8"
            }
        },
       }
    }
}

How can i get color_name from colors.standard?

for now it's showing array, if i add one more foreach loop it's still giving array.

Solution

Knockout's foreach needs an iterable to be able to repeat the template you give it and render its UI.

Javascript objects are not iterable by default. Your colors.standard property holds an object, so knockout does not know how to loop it.

In this particular case, you probably want to loop over the values of your object. To get an array of the object's values, you can use:

data: Object.values(column.colors.standard)

Other strategies could be:

Loop over an object's keys by using Object.keys
Loop over an object's entries ([key, value] pairs) by using Object.entries

Note that the order of the values/keys/entries typically relies on the order in which they were defined. Unlike arrays, an object doesn't let you easily re-order. That's why you often see a .sort chained behind Object.values.