knockout js，针对自定义数组的每个循环问题

Question

我正在尝试从 colors.standard 获取 color_name。

我尝试了下面给出的方法 html 但两者都显示相同的数组。

HTML - 不工作

<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 不工作

<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>

控制台 JS 数组：

{
    "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"
            }
        },
       }
    }
}

如何从 colors.standard 得到 color_name？

目前显示的是数组，如果我再添加一个 foreach 循环，它仍然会显示数组。

Answer 1

Knockout 的 foreach 需要 iterable 才能重复您提供的模板并呈现其 UI。

Javascript 对象默认是不可迭代的。你的 colors.standard 属性持有一个对象，所以 knockout 不知道如何循环它。

在这种特殊情况下，您可能希望遍历对象的值。要获取对象值的数组，您可以使用：

数据：<strong>Object.values</strong>(column.colors.standard)

其他策略可能是：

使用Object.keys

键

使用 Object.entries

条目

[key, value]

请注意，values/keys/entries 的顺序通常取决于它们的定义顺序。与数组不同，对象不会让您轻松地重新排序。这就是为什么你经常看到 .sort 被拴在 Object.values 后面的原因。

knockout js，针对自定义数组的每个循环问题

knockout js , for each loop issue with custom array

knockout.js

knockout-mvc