Advertisement

Modal in array loop in JavaScript

Peter Mortensen

edited 29 Jul, 2021

Ambrose Sulley

asked 14 Jan, 2021

I’m working on my E-commerce project. Here is something I am struggling to figure out…

If clicking on the “i” icon, a modal should open.

Code snippet

 
const products = [
    {
        id: 1,
        title: 'Pens',
        img: '/assets/images/Stationery Items/d-pens.jpg',
        description: 'Pens',
        rate: 4.2,
    },
    {
        id: 2,
        title: 'Notebooks',
        img: '/assets/images/Stationery Items/d-notebooks.jpg',
        description: 'Notebooks',
        rate: 3.4,
    },
    {...}
]


function showProduct(product) {
    return `

            <div class="box-wrap border">
                <img src="${product.img}" class="rounded d-block">
                <div class="body">
                    <h5>${product.title}</h5>
                    <div class="d-flex justify-content-between">
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-info"></i></a>
                    </div>
                </div>
            </div>
        `
}

function productList() {
    document.getElementById('products').innerHTML = `
            <div class="owl-carousel">
                ${products.map(showProduct).join('')}
            </div>
          `
}

JavaScript
​x
 
 
const products = [
    {
        id: 1,
        title: 'Pens',
        img: '/assets/images/Stationery Items/d-pens.jpg',
        description: 'Pens',
        rate: 4.2,
    },
    {
        id: 2,
        title: 'Notebooks',
        img: '/assets/images/Stationery Items/d-notebooks.jpg',
        description: 'Notebooks',
        rate: 3.4,
    },
    {...}
]
​
​
function showProduct(product) {
    return `
​
            <div class="box-wrap border">
                <img src="${product.img}" class="rounded d-block">
                <div class="body">
                    <h5>${product.title}</h5>
                    <div class="d-flex justify-content-between">
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-info"></i></a>
                    </div>
                </div>
            </div>
        `
}
​
function productList() {
    document.getElementById('products').innerHTML = `
            <div class="owl-carousel">
                ${products.map(showProduct).join('')}
            </div>
          `
}

Advertisement

Answer

You can use Bootstrap with modal:

const products = [
    {
        id: 1,
        title: 'Pens',
        img: '/assets/images/Stationery Items/d-pens.jpg',
        description: 'Pens',
        rate: 4.2,
    },
    {
        id: 2,
        title: 'Notebooks',
        img: '/assets/images/Stationery Items/d-notebooks.jpg',
        description: 'Notebooks',
        rate: 3.4,
    },
 ];

products.map((v, k) => {
    $('#sliders').append('<button type="button" class="btn btn-primary openModal" data-key="'+ k +'">'+ v.title +'</button>')
})

$(document).on('click', 'button.openModal', function () {
    var productKey = $(this).data('key');
  var product = products[productKey];
  if(product){
    $('#exampleModal').modal('toggle');
    $('#exampleModal #exampleModalLabel').html(product.title);
    var content = '<div>Title: '+ product.title + '</div><div>Description: ' + product.description+'</div><div>Rate: '+product.rate+'</div>';
    $('#exampleModal .modal-body').html(content);
  }
})

JavaScript
 
const products = [
    {
        id: 1,
        title: 'Pens',
        img: '/assets/images/Stationery Items/d-pens.jpg',
        description: 'Pens',
        rate: 4.2,
    },
    {
        id: 2,
        title: 'Notebooks',
        img: '/assets/images/Stationery Items/d-notebooks.jpg',
        description: 'Notebooks',
        rate: 3.4,
    },
 ];
​
products.map((v, k) => {
    $('#sliders').append('<button type="button" class="btn btn-primary openModal" data-key="'+ k +'">'+ v.title +'</button>')
})
​
$(document).on('click', 'button.openModal', function () {
    var productKey = $(this).data('key');
  var product = products[productKey];
  if(product){
    $('#exampleModal').modal('toggle');
    $('#exampleModal #exampleModalLabel').html(product.title);
    var content = '<div>Title: '+ product.title + '</div><div>Description: ' + product.description+'</div><div>Rate: '+product.rate+'</div>';
    $('#exampleModal .modal-body').html(content);
  }
})

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>
<body >
    <!-- Button trigger modal -->
<div id="sliders"></div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>
<body >
    <!-- Button trigger modal -->
<div id="sliders"></div>
​
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Advertisement