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

Posted 2023-03-27

【中文标题】淘汰赛 js，针对自定义数组的每个循环问题

【英文标题】：knockout js , for each loop issue with custom array

【发布时间】：2021-12-01 20:27:25

【问题描述】：

我正在尝试从 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 循环，它仍然会给出数组。

【问题讨论】：

colors.standard 是一个对象，而不是一个数组。 Knockout 的foreach 不知道如何迭代对象。您可以使用data: Object.values(column.colors.standard) 循环遍历对象的值（这可能是您想要的）。

谢谢，它正在工作......

【参考方案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 后面的原因。

【讨论】：

***.com/questions/69568465/…