фильтр JS. событие нажатия кнопки

Question

Только начал изучение JS. Подскажите пожалуйста как привязать перебранный массив productDinner к кнопке Dinner? Что бы отображались только завтраки а остальные элементы страницы исчезали. И так нужно со всем списком меню. Или как лучше реализовать это

const CATALOG = [{
    id: 'dinner',
    img: '/img/pancakes.jpeg',
    name: 'Buttermilk Pancakes',
    price: '$15.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'dinner',
    img: '/img/dinner.jpg',
    name: 'Dinner Double',
    price: '$13.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/milkshakes.jpeg',
    name: 'Godzilla Milkshake',
    price: '$6.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/burger2.jpeg',
    name: 'Country Delight',
    price: '$20.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'dinner',
    img: '/img/egg_attack.jpg',
    name: 'Egg attack',
    price: '$22.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/oreo.jpg',
    name: 'Oreo Dream',
    price: '$18.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'lunch',
    img: '/img/bacon.jpg',
    name: 'Bacon Overflow',
    price: '$8.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'breakfast',
    img: '/img/Quarantine Buddy.jpg',
    name: 'Quarantine Buddy',
    price: '$16.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'lunch',
    img: '/img/steak.jpeg',
    name: 'Steak Dinner',
    price: '$39.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'breakfast',
    img: '/img/burger.jpg',
    name: 'American Classic',
    price: '$12.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
];
const ROOT_PRODUCTS = document.getElementById('products');
class Products {
  render() {
    let htmlCatalog = '';
    CATALOG.forEach(({
      id,
      img,
      name,
      price,
      descr
    }) => {

      htmlCatalog += `
                <li class = "products_element">
                    <span class="id">${id}</span>
                    <img class="img"src="${img}"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${name}</span>
                            <span class="price">${price}</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${descr}</span>
                    </span>
                    
                </li>
            `;
    });

    const html = `
            <ul class = "products_container">
                ${htmlCatalog}
            </ul>
        `;
    ROOT_PRODUCTS.innerHTML = html;
  }
}

const productsPage = new Products();
productsPage.render();
const list = document.querySelector('.list');
const items = document.querySelectorAll('.list_item');


function filter() {
  list.addEventListener('click', event => {
    const targetId = event.target.dataset.id
    console.log(targetId)

    switch (targetId) {
      case 'all':
        break
      case 'dinner':
        break
    }
  })
}
filter()

let productDinner = CATALOG.filter(item => item.id == 'dinner');
console.log(productDinner);

<div class="container"></div>
<h1>Our menu</h1>
<div class="line"></div>
<div class="nav">
  <ul class="list">
    <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
    <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
    <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
    <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
    <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
  </ul>
</div>

<div id="products"></div>

Answer 1

Один из вариантов - создать отдельную переменную filteredData внутри класса PRODUCTS, в которую помещать отфильтрованный массив CATALOG, после чего выполнять метод render не всего каталога, а только filteredData.

const CATALOG = [
    {
        id: 'dinner',
        img: '/img/pancakes.jpeg',
        name: 'Buttermilk Pancakes',
        price: '$15.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/dinner.jpg',
        name: 'Dinner Double',
        price: '$13.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/milkshakes.jpeg',
        name: 'Godzilla Milkshake',
        price: '$6.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/burger2.jpeg',
        name: 'Country Delight',
        price: '$20.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/egg_attack.jpg',
        name: 'Egg attack',
        price: '$22.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/oreo.jpg',
        name: 'Oreo Dream',
        price: '$18.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/bacon.jpg',
        name: 'Bacon Overflow',
        price: '$8.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/Quarantine Buddy.jpg',
        name: 'Quarantine Buddy',
        price: '$16.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/steak.jpeg',
        name: 'Steak Dinner',
        price: '$39.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/burger.jpg',
        name: 'American Classic',
        price: '$12.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
];
const ROOT_PRODUCTS = document.getElementById('products');
class Products {
    constructor (dataset) {
        this.data = dataset
        this.filteredData = dataset //для первоначальной отрисовки целого списка
    }
    filter(filterquery) {
        if(filterquery=='all'){
            this.filteredData = this.data
        } else {
            this.filteredData = this.data.filter(item => {
                return item.id == filterquery
            })
        }
    }
    render() {
        let htmlCatalog ='';
        this.filteredData.forEach(({id, img, name, price, descr}) => {
            
            htmlCatalog += `
                <li class = "products_element">
                    <span class="id">${id}</span>
                    <img class="img"src="${img}"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${name}</span>
                            <span class="price">${price}</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${descr}</span>
                    </span>
                    
                </li>
            `;
        });
        
        const html = `
            <ul class = "products_container">
                ${htmlCatalog}
            </ul>
        `;
        ROOT_PRODUCTS.innerHTML = html;
    }
}

const productsPage = new Products(CATALOG);
productsPage.render();
const list = document.querySelector('.list');
const items = document.querySelectorAll('.list_item');

list.addEventListener('click', event =>{
    const targetId = event.target.dataset.id
    productsPage.filter(targetId)
    productsPage.render()
})

<div class="container"></div>
        <h1>Our menu</h1>
        <div class="line"></div>
        <div class="nav">
            <ul class="list">
                <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
                <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
                <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
                <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
                <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
            </ul>
        </div>

        <div id="products"></div>
    </div>

Answer 2

И так, для начала мы при рендере нашего списка продуктов добавим атрибут data-id, который будет равняться id нашего продукта из каталога (на самом то деле id здесь не подходит, более подходящее название - category).
Затем мы добавим метод filter в наш класс Products, который будет аргументом принимать категорию (наше значение data-id), в котором мы будем проходится по всем нашим .products_element и выставлять класс hide в зависимости от условия.
В нашем случае класс hide получат элементы, чья категория (data-id) .products_element не равняется переданной и если категория не равняется all.
Мы немного переделаем наш обработчик клика, чтобы убедиться, что клик был именно по кнопке.

const CATALOG = [
    {
        id: 'dinner',
        img: '/img/pancakes.jpeg',
        name: 'Buttermilk Pancakes',
        price: '$15.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/dinner.jpg',
        name: 'Dinner Double',
        price: '$13.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/milkshakes.jpeg',
        name: 'Godzilla Milkshake',
        price: '$6.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/burger2.jpeg',
        name: 'Country Delight',
        price: '$20.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/egg_attack.jpg',
        name: 'Egg attack',
        price: '$22.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/oreo.jpg',
        name: 'Oreo Dream',
        price: '$18.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/bacon.jpg',
        name: 'Bacon Overflow',
        price: '$8.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/Quarantine Buddy.jpg',
        name: 'Quarantine Buddy',
        price: '$16.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/steak.jpeg',
        name: 'Steak Dinner',
        price: '$39.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/burger.jpg',
        name: 'American Classic',
        price: '$12.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    }
];

class Products
{
    render()
    {
        if (ROOT_PRODUCTS === null)
        {
            return;
        }

        let htmlCatalog = '';
        CATALOG.forEach(({ id, img, name, price, descr }) =>
        {
            htmlCatalog += `
                <li class="products_element" data-id="${id}"}>
                    <span class="id">${ id }</span>
                    <img class="img"src="${ img }"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${ name }</span>
                            <span class="price">${ price }</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${ descr }</span>
                    </span>
                </li>
            `;
        });

        const html = `
            <ul class="products_container">
                ${ htmlCatalog }
            </ul>
        `;

        ROOT_PRODUCTS.innerHTML = html;
    }

    filter(category)
    {
        if (ROOT_PRODUCTS === null)
        {
            return;
        }

        const products = ROOT_PRODUCTS.querySelectorAll(".products_element");
        if (products === null)
        {
            return;
        }

        products.forEach((product) =>
        {
            product.classList.toggle("hide", category !== "all" && product.dataset.id !== category);
        });
    }
}


const ROOT_PRODUCTS = document.getElementById('products');
const productsPage = new Products();
productsPage.render();

const list = document.querySelector('.list');


function filter()
{
    list.addEventListener('click', ({target}) =>
    {
        if (target.classList.contains("button") === false)
        {
            return;
        }
        
        productsPage.filter(target.dataset.id);
    });
}

filter();

.hide { display: none; }

<div class="container"></div>
<h1>Our menu</h1>
<div class="line"></div>
<div class="nav">
  <ul class="list">
    <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
    <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
    <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
    <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
    <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
  </ul>
</div>

<div id="products"></div>

БЛОГ НА HUSL

фильтр JS. событие нажатия кнопки

Ответы (2 шт):