How do I pull items from JSON file to HTML code?

I’m currently having trouble in regards to pulling stuff from a JSON file into my HTML page. So to start, I currently have this code in a JSON file, which is all the items I have (so far) that I want to use for a project to create an online store.

export const data = 
[
    {
        id: 1,
        productName: "Chutes and Ladders",
        image: "../public/ChutesandLadders.jpg",
        price: 15.75,
        salePrice: 15.75,
    },
    {
        id: 2,
        productName: "Monopoly",
        image: "../public/Monopoly.jpg",
        price: 15.25,
        salePrice: 15.25,
    },
    {
        id: 3,
        productName: "Clue",
        image: "../public/Clue.jpg",
        price: 20.00,
        salePrice: 15.20,
    },
    {
        id: 4,
        productName: "The Game of Life",
        image: "../public/GameofLife.jpg",
        price: 16.00,
        salePrice: 10.00
    },
    {
        id: 5,
        productName: "TRESomme Shampoo",
        image: "../public/Tresomme.jpg",
        price: 45.00,
        salePrice: 30.00,
    },
    {
        id: 6,
        productName: "Michael Kors Purse",
        image: "../public/MichaelKorsPurse.jpg",
        price: 145.00,
        salePrice: 145.00,
    },
    {
        id: 7,
        productName: "Apple Watch Ultra",
        image: "../public/AppleWatch.jpg",
        price: 200.00,
        salePrice: 175.00,
    },
]

Then to show a sample of it, I have this information on my HTML page (index.html) where I want to change the data to the data I have from the JSON file.

<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>  
  <img class="card-img-top" width="450" height="200" src="Clue.jpg" alt="..." />         
     <div class="card-body p-4">
        <div class="text-center">
           <h5 class="fw-bolder">Clue</h5>
              <div class="d-flex justify-content-center small text-warning mb-2">
                 <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                 </div>
              <span class="text-muted text-decoration-line-through">$20.00</span>
              $15.20
           </div>
        </div>
        <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
           <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
        </div>
     </div>
  </div>

Is there a way to import JSON data into an HTML file, where I can actually do this?