Create a loop of bootstrap 4 card with given array?

user_12650275 0
Viewed 1509

I want to create the HTML like this picture. This css using bootstrap 4.3.1 and there are some card with embedded picture for each card

enter image description here

with the source code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM Practice</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-light bg-light">
            <a class="navbar-brand">Mini Ecommerce</a>
            <form class="form-inline" id="formItem" action="#">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" id="keyword" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchItem">Search</button>
            </form>
            <button class="btn btn-primary" id="cart"><i class="fas fa-shopping-cart"></i>(0)</button>
        </nav>
        <div class="row" id="shop">
            <div id="keyBoard" class="col-md-4 mt-2">
                <div class="card" style="width: 18rem;">
                    <img src="msi.jpg" class="card-img-top img-fluid" alt="keyboard">
                    <div class="card-body">
                        <h5 class="card-title" id="itemName">MSI</h5>
                        <p class="card-text" id="itemDesc">MSI Keyboard</p>
                        <p class="card-text">Rp 300.000,00</p>
                        <a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div id="keyBoard" class="col-md-4 mt-2">
                <div class="card" style="width: 18rem;">
                    <img src="logitek.jpg" class="card-img-top img-fluid" alt="keyboard">
                    <div class="card-body">
                        <h5 class="card-title" id="itemName">Logitek</h5>
                        <p class="card-text" id="itemDesc">Logitek Keyboard</p>
                        <p class="card-text">Rp 60.000,00</p>
                        <a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div id="moUse" class="col-md-4 mt-2">
                <div class="card" style="width: 18rem;">
                    <img src="genius.jpeg" class="card-img-top img-fluid" alt="mouse">
                    <div class="card-body">
                        <h5 class="card-title" id="itemName">Genius</h5>
                        <p class="card-text" id="itemDesc">Genius Mouse</p>
                        <p class="card-text">Rp 50.000,00</p>
                        <a href="#" class="btn btn-primary" id="addCart">TAdd to cart</a>
                    </div>
                </div>
            </div>
            <div id="moUse" class="col-md-4 mt-2">
                <div class="card" style="width: 18rem;">
                    <img src="jerry.jpg" class="card-img-top img-fluid" alt="mouse">
                    <div class="card-body">
                        <h5 class="card-title" id="itemName">Jerry</h5>
                        <p class="card-text" id="itemDesc">Jerry Mouse</p>
                        <p class="card-text">Rp 30.000,00</p>
                        <a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

My questions : how to display that cards (bootstrap card) with a loop of javascript than input manually, if I'm add this array to the script :

var items = [
            [ 'Logitek', 'Rp 60.000,00', 'Logitek Keyboard', 'logitek.jpeg'],
            [ 'MSI', 'Rp 300.000,00', 'MSI Keyboard', 'msi.jpeg'],
            [ 'Genius', 'Rp 50.000,00', 'Genius Mouse', 'genius.jpeg'],
            [ 'Jerry', 'Rp 30.000,00', 'Jerry Mouse', 'jerry.jpeg']
        ]

css html jquery javascript
1 Answers

You can use forEach and template literal.

var items = [
  ['Logitek', 'Rp 60.000,00', 'Logitek Keyboard', 'logitek.jpeg'],
  ['MSI', 'Rp 300.000,00', 'MSI Keyboard', 'msi.jpeg'],
  ['Genius', 'Rp 50.000,00', 'Genius Mouse', 'genius.jpeg'],
  ['Jerry', 'Rp 30.000,00', 'Jerry Mouse', 'jerry.jpeg']
]

let content = '';

items.forEach(p => {
  content += `
    <div id="keyBoard" class="col-md-4 mt-2">
              <div class="card" style="width: 18rem;">
                  <img src="${p[3]}" class="card-img-top img-fluid" alt="keyboard">
                  <div class="card-body">
                      <h5 class="card-title" id="itemName">${p[0]}</h5>
                      <p class="card-text" id="itemDesc">${p[2]}</p>
                      <p class="card-text">${p[1]}</p>
                      <a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
                  </div>
              </div>
          </div>
  `
});

document.querySelector("#shop").innerHTML = content;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<div class="container">
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand">Mini Ecommerce</a>
    <form class="form-inline" id="formItem" action="#">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" id="keyword" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchItem">Search</button>
    </form>
    <button class="btn btn-primary" id="cart"><i class="fas fa-shopping-cart"></i>(0)</button>
  </nav>
  <div class="row" id="shop">
  </div>
</div>

user_106987410
Related