淘汰赛 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 不知道如何循环它。

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

data: <strong>Object.values</strong>(column.colors.standard)

其他策略可能是：

• 使用Object.keys 循环遍历对象的键
• 使用Object.entries 循环遍历对象的条目（[key, value] 对）

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