CODEWITHSUNDEEP
javascripthtml
e wowie
e wowie

Reputation: 49

How to append an array of objects to a card element in javascript

I am very new to javascript and I am working on a small project. I have a small array of objects in my javascript file that I want to create and populate product cards with.

my current set up of the product card is about 20 lines, I have taken the approach to see if I could use document.createElement... append element, etc and after doing so I ran into some problems with my objects seemingly being undefined plus I need to be able to append into the tags so thay i can define classes and id's so that my css will pick up on the code and make it pretty eg <div class = "test>" . Overall it's just a mess and will take triple the lines of code required to build the card.

here is a snippet of my javascript array 


       window.products = [
    {
        name: "Berry Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    },

and here is a snippet of the card layout i am going to be using.

 <div class="product-card">
            <div class="badge">Hot</div>
            <div class="product-tumb">
                <img src="images/dog-running.jpg" alt="" />
            </div>
            <div class="product-details">
                <span class="product-catagory">dog1,dog2</span>
                <h4><a href="">big boy</a></h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Vero, possimus nostrum!
                </p>
                <div class="product-bottom-details">
                    <div class="product-price">
                        <small>$96.00</small>$230.99
                    </div>
                    <button>buy now</button>
                    <div class="product-links">
                        <a><i class="fa fa-heart"></i></a>
                        <a><i class="fa fa-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>

I am hoping to populate the page with as many cards as there are objects in the array.

My results so far have just been undefined and basically a mess of code, I can provide the code I'm using but it is useless and I don't want to build on it. I have heard of .map being useful but im not sure use it to its full potential.

Upvotes: 1

Views: 2453

Answers (1)

Hybrid
Hybrid

Reputation: 7049

You can use JS to loop over each product, combine the product using the template literal syntax (${variable}), and then reinject it into the DOM.

Example:

products = [
    {
        name: "Berry Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    },
    {
        name: "Tommy Leash",
        img: 'src="images/leashes/berry.jpg" alt="berry leash"',
        price: 14.99,
        onsale: 0.0,
        tags: "Leash",
        description: "A fresh taste on a collar,"
    }
]

products.forEach(product => {
	var div = document.querySelector('div')
  
	div.innerHTML = div.innerHTML + `
          <div class="product-card">
              <div class="badge">Hot</div>
              <div class="product-tumb">
                  <img src="images/dog-running.jpg" alt="" />
              </div>
              <div class="product-details">
                  <span class="product-catagory">dog1,dog2</span>
                  <h4><a href="">${product.name}</a></h4>
                  <p>
                      ${product.description}
                  </p>
                  <div class="product-bottom-details">
                      <div class="product-price">
                          <small>$96.00</small>${product.price}
                      </div>
                      <button>buy now</button>
                      <div class="product-links">
                          <a><i class="fa fa-heart"></i></a>
                          <a><i class="fa fa-shopping-cart"></i></a>
                      </div>
                  </div>
              </div>
          </div>

          <br />
          <br />
  `
})
<div></div>

Upvotes: 2

Related Questions