How can I sort through an array of objects when a button is clicked to display a category?

Question

I have a homework of making an eCommerce website that has a requirement of being able to sort products by category, and price and then display those that match in the website

I created the products objects and also got it display them into my website how I wanted them but still no luck with the sorting with what I have tried so I was wondering if anybody had a method to do this

let products = [{
        name: '919 Shirt',
        price: 30,
        category: 'Clothing',
        description: 'Cotton Shirt from S.N.M with his original design',
        url: `https://i.imgur.com/1UolmmD.png`
    }, {
        name: 'NC Baseball Cap',
        price: 19.99,
        category: 'Clothing',
        description: 'Baseball cap from S.N.M commerating NC',
        url: `https://i.imgur.com/XgQW8sZ.png`,
    },
    {
        name: 'Martin Commemorative Shirt',
        price: 29.99,
        category: 'Clothing',
        description: `Design by S.N.M`,
        url: `https://i.imgur.com/w6tCDHX.png`,
    },
    {
        name: `American DJ Pro Event Table II Foldable Portable DJ Booth`,
        price: 389.99,
        category: 'Event Equipment',
        description: `Cool Table for events.`,
        url: `https://images-na.ssl-images-amazon.com/images/I/71s5FCjIkoL._SX425_.jpg`,
    },
    {
        name: `Rockville ROCKFORCE 384 Channel Light/Fog DMX Lighting Controller`,
        price: 9995.95,
        category: `Event Equipment`,
        description: `Professional Event lighting controller from Rockville`,
        url: `https://images-na.ssl-images-amazon.com/images/I/71%2Bc4Qvj1iL._SX679_.jpg`,
    },
    {
        name: `JBL Powered 3-Way High Directivity Line Array`,
        price: 55775.99,
        category: `Event Equipment`,
        description: `Array of JBL speakers for events`,
        url: `https://images-na.ssl-images-amazon.com/images/I/511XZRVO22L._SX425_.jpg`,
    },
    {
        name: `VTX M22 Dual 12" Professional Stage Monitor`,
        price: 3500.99,
        category: `Event Equipment`,
        description: `Professional stage monitor.`,
        url: 'https://www.springtree.net/image/cache/data/jm22-900x900.jpg',
    },
    {
        name: `JBL VRX932LAP`,
        description: `12 in. Two-Way Powered Line Array Loudspeaker System`,
        price: 2699.99,
        category: `Event Equipment`,
    },
    {
        name: `JBL VRX918SP`,
        description: `18 in. High Power Powered Flying Subwoofer`,
        price: 1999.99,
        category: `Event Equipment`
    },
    {
        name: `VRX915M`,
        description: `15 in. Two-Way Stage Monitor`,
        price: 1699.99,
        category: `Event Equipment`
    },
    {
        name: `The Face Off - Drake Vs. Meek Mill And Beyonce Vs. Rihanna`,
        description: `Charlotte, NC`,
        price: 22.50,
        category: `Event Ticket`
    },
    {
        name: `Mozzy - Internal Affairs Tour`,
        description: `Charlotte, NC`,
        price: 18.00,
        category: `Event Ticket`,

    }
]

function Display() {
    let allProductsHTML = '';
    const productGrid = document.getElementById('productGrid');
    products.forEach(product => {
        const productHTML = `
        <div class="col-lg-4 col-sm-6">
            <figure class="card card-product">
                <article class="img-wrap"><img src="${product.url}"></article>
                <div class="bottom--section">
                <figcaption class="info-wrap">
                        <h4 class="title">${product.name}</h4>
                        <p class="desc">${product.description}</p>
                </figcaption>
                <section class="bottom-wrap">
                    <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> 
                    <div class="price-wrap h5">
                        <span class="price-new">$${product.price}</span> <del class="price-old">$${product.price*2}</del>
                    </div> <!-- price-wrap.// -->
                </section> <!-- bottom-wrap.// -->
                </div
            </figure>
        </div> <!-- col // -->    
        `
        allProductsHTML += productHTML;
    });
    productGrid.innerHTML = allProductsHTML;
}
Display();