循环遍历嵌套的 js 对象并使用 Jquery 使用自定义 html 附加 div

Posted 2023-05-09

【中文标题】循环遍历嵌套的 js 对象并使用 Jquery 使用自定义 html 附加 div

【英文标题】：loop through nested js object and append div with custom html using Jquery

【发布时间】：2021-09-04 02:04:51

【问题描述】：

我什至不确定我是否正确地用了我需要的标题，但简而言之，我正在尝试遍历嵌套的 js 对象，提取特定值，将它们与 html 模板组合，然后附加一个 Div结果（对于使用 snipcart 的电子商务网站）。

这是我目前的代码（显然不起作用）

var comics = 
    modern: 
        1: 
            "data-item-id" : "pun-224",
            "data-item-price" : "3.49",
            "data-item-url" : "/",
            "data-item-description" : "The Punisher issue 224",
            "data-item-image" : "/img/modern.jpg",
            "data-item-name" : "The punisher 224"
        ,
        2:
            "data-item-id" : "pun-225",
            "data-item-price" : "3.49",
            "data-item-url" : "/",
            "data-item-description" : "The Punisher issue 224",
            "data-item-image" : "/img/silver.jpg",
            "data-item-name" : "The punisher 225"
        
            

    


$(document).ready(function()
console.log("hello");
$.each(comics.modern, function() 
    
        var list = $("#comic__list");
        list.append(
            `<button 
            class="snipcart-add-item" 
            data-item-id="$this.data-item-id" 
            data-item-price="$this.data-item-id" 
            data-item-url="$this.data-item-id" 
            data-item-description="$this.data-item-id" 
            data-item-image="$this.data-item-id" 
            data-item-name="$this.data-item-id"> 
            Add to cart
            </button>`
        )    

    
);

);

【参考方案1】：

只需使用 Object.keys 将对象键作为数组获取，然后您就可以循环遍历它：

$(document).ready(function()
$.each(Object.keys(comics.modern), function() 
    var currentObject = comics.modern[this];
    var list = $("#comic__list");
    list.append(
         `<button 
            class="snipcart-add-item" 
            data-item-id="$currentObject['data-item-id']" 
            data-item-price="$currentObject['data-item-id']" 
            data-item-url="$currentObject['data-item-id']" 
            data-item-description="$currentObject['data-item-id']" 
            data-item-image="$currentObject['data-item-id']" 
            data-item-name="$currentObject['data-item-id']"> 
            Add to cart
         </button>`
     )   
    
);
);

注意：当属性包含破折号时，您不能使用 object.property-of-the-object，而是使用 object['property-of-the-object']