Блог

Я даже не уверен, правильно ли я сформулировал название того, что мне нужно, но, в двух словах, я пытаюсь просмотреть вложенный объект 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>`
        )    

    
});
 

});

Просто используйте 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>`
     )   
    
});
});
 

Примечание: вы не можете использовать объект.свойство объекта, когда свойство содержит тире, вместо этого используйте объект[‘свойство объекта’]