'Accessing values from object instead of hardcoding HTML and JS

So I've created a website with some functionality that is able to load products, add to a cart, remove from cart, adding up the total price and displaying the product. My HTML though is static referencing the product but I want to make it dynamic. So I created a object to use instead, how do I do that? How do I change my HTML & JS to make it dynamic instead of static?

HTML

<div class="shop-items">
  <div class="shop-item">
    <span class="shop-item-title">ALoe Vera</span>
    <img class="shop-item-image" src="img/alovera.jpeg">
    <div class="shop-item-details">
      <span class="shop-item-price">$19.99</span>
      <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
    </div>
  </div>
  <div class="shop-item">
    <span class="shop-item-title">Citron</span>
    <img class="shop-item-image" src="img/citronfikus.jpeg">
    <div class="shop-item-details">
      <span class="shop-item-price">$6.99</span>
      <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
    </div>
  </div>

JavaScript code to show the items What I want is to use the object I created and make it dynamic, showing the items instead

const products = [{
    "name": "Aloe Vera",
    "origin": "Netherlands",
    "description": "Some text",
    "height": "120cm",
    "image": "img/alovera.jpeg",
    "price": 100 + "kr"
  },
  {
    "name": "Hemp",
    "origin": "Denmark",
    "description": "some text",
    "height": "50-100cm",
    "image": "img/hemp.jpeg",
    "price": 200 + "kr"
  }
];

function addToCartClicked(event) {
  var button = event.target
  var shopItem = button.parentElement.parentElement
  var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
  var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
  var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
  addItemToCart(title, price, imageSrc)
  updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
  var cartRow = document.createElement('div')
  cartRow.classList.add('cart-row')
  var cartItems = document.getElementsByClassName('cart-items')[0]
  var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
  for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == title) {
      alert('This item is already added to the cart')
      return
    }
  }
javascripthtmldom


Solution 1:[1]

Your HTML COde will be Just one main div:

<div id="populate"></div>

Your Javascript code will be like this.

const products = [{
    "name": "Aloe Vera",
    "origin": "Netherlands",
    "description": "Some text",
    "height": "120cm",
    "image": "img/alovera.jpeg",
    "price": 100 + "kr"
  },{
    "name": "Hemp",
    "origin": "Denmark",
    "description": "some text",
    "height": "50-100cm",
    "image": "img/hemp.jpeg",
    "price": 200 + "kr"
  }
]

let str = ""

products.forEach((element, index) =>{

str+=`
    <span class="shop-item-title">${products[index].name}</span>
    <img class="shop-item-image" src="img/alovera.jpeg">
    <div class="shop-item-details">
      <span class="shop-item-price">${products[index].price}</span>
      <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
    </div>`
})
document.getElementById('populate').innerHTML = str

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muhammad Tahir Ali

Related Questions