How to show images based upon which button is selected-CodePudding

I have created 4 buttons in my HTML file. I have an object in my JavaScript file named products created using curly brackets {}. Within this object, I have an Array named data created using square brackets []. Within this Array, I have a number of different objects created using curly brackets {}.

Each of the objects within the Array are displayed correctly. I now want to create a filter, which will only show certain objects within the Array, depending on which button is pressed.

In my HTML file, I have this code:

<div id="buttons">
   <button id="all"  onclick="filterProduct('all')">All</button>
   <button id="product1"  onclick="filterProduct('product1')">Product 1</button>
   <button id="product2"  onclick="filterProduct('product2')">Product 2</button>
   <button id="product3"  onclick="filterProduct('product3')">product3</button>
</div>

In my CSS file, I have this code:

.hide {
    display: none;
}

The object I have created in JavaScript:

let products = {
    data: [
        {
            productName: "Item 1",
            category: "product1",
            price: "30",
            image: "image-of-the-product-1.jpg",
        },
        {
            productName: "Item 2",
            category: "product2",
            price: "49",
            image: "image-of-the-product-2.jpg",
        },
        {
            productName: "Item 3",
            category: "product3",
            price: "99",
            image: "image-of-the-product-3.jpg",
        },
    ]
}

The filterProduct function in JavaScript:

// Parameter passed from button (Parameter same as category)
function filterProduct(value) {
    // Select all elements
    let elements = document.querySelectorAll(".card");
    // Loop through the elements
    elements.forEach((element) => {
    // Display all cards on all button click
    if (value == "all") {
        element.classList.remove("hide");
    } else {
        // Check if element contains category class
        if (element.classList.contains(value)) {
            // Display elements based on category
            element.classList.remove("hide");
        } else {
            // Hide other elements
            element.classList.add("hide");
        }
    }
});
}

If the user clicks on the button with the product1 filter, only products with the category of product1 should show up. If the user clicks on a button with the product2 filter, only products with the category of product2 should show up. If the user clicks on the button with the product3 filter, only products with the category of product3 should show up.

CodePudding user response：

let products = {
  data: [{
      productName: "Item 1",
      category: "product1",
      price: "30",
      image: "https://via.placeholder.com/200x200",
    },
    {
      productName: "Item 2",
      category: "product2",
      price: "49",
      image: "https://via.placeholder.com/400x400",
    },
    {
      productName: "Item 3",
      category: "product3",
      price: "99",
      image: "https://via.placeholder.com/350x150",
    },
    {
      productName: "Item 3",
      category: "all",
      price: "99",
      image: "https://via.placeholder.com/200x100",
    },
  ]
}

function filterProduct(value) {
  var newArray = products.data.filter(function(item) {
    return item.category == value;
  })[0];
  console.log(newArray)
  var html = [
    '<div >',
    '<img src='   newArray.image   '>',
    '</div>'
  ].join('\n');
  document.getElementById("displayImage").innerHTML = html;
}

.hide {
  display: none;
}

<div id="buttons">
  <button id="all"  onclick="filterProduct('all')">All</button>
  <button id="product1"  onclick="filterProduct('product1')">Product 1</button>
  <button id="product2"  onclick="filterProduct('product2')">Product 2</button>
  <button id="product3"  onclick="filterProduct('product3')">product3</button>
</div>

<div id="displayImage"></div>

let products = {
  data: [{
      productName: "Item 1",
      category: "product1",
      price: "30",
      image: "image-of-the-product-1.jpg",
    },
    {
      productName: "Item 2",
      category: "product2",
      price: "49",
      image: "image-of-the-product-2.jpg",
    },
    {
      productName: "Item 3",
      category: "product3",
      price: "99",
      image: "image-of-the-product-3.jpg",
    },
  ]
}

function filterProduct(value) {
  var image1 = '';
  switch (value) {
    case 'all':
      image1 = 'https://via.placeholder.com/200x100';
      break;
    case 'product1':
      image1 = 'https://via.placeholder.com/200x200';
      break;
    case 'product2':
      image1 = 'https://via.placeholder.com/400x400';
      break;
    case 'product3':
      image1 = 'https://via.placeholder.com/350x150';
      break;
    default:
      // default code block
  }
  var html = [
    '<div >',
    '<img src='   image1   '>',
    '</div>'
  ].join('\n');
  document.getElementById("displayImage").innerHTML = html;
}

.hide {
  display: none;
}

<div id="buttons">
  <button id="all"  onclick="filterProduct('all')">All</button>
  <button id="product1"  onclick="filterProduct('product1')">Product 1</button>
  <button id="product2"  onclick="filterProduct('product2')">Product 2</button>
  <button id="product3"  onclick="filterProduct('product3')">product3</button>
</div>

<div id="displayImage"></div>

If Data is static then you can use switch case this is how you can display image according button click

If Data is dynamic and you are not able to map that you can use filter to map that data

CodePudding user response：

Here you can find Working demo DEMO

I have added my own card as of now but you can change this acording your necessity.