循環遍歷嵌套的 js 對象並使用 Jquery 使用自定義 html 附加 div

Question

我什至不確定我是否正確地說出了我需要的標題，但簡而言之，我試圖遍歷嵌套的 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>`
        )    

    
});

});

Answer 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']