Enlace al código en vivo.

Actualmente estoy extrayendo datos de API para productos que tienen puntos de precio de miles. A continuación, intenté agregar el código toLocaleString() al precio, que en su totalidad a continuación es <p id="price">$${product.price?.text.toLocaleString() ?? ""}</p> . Sin embargo, no parece agregar una coma para que el precio se lea en miles (ejemplo: 1,000).

Código JS

 // Fetch Data async function getData() { const res = await fetch(url); const data = await res.json(); let output = ""; // Loop through first 'groups' array data.groups.map(function (group) { // Loop through each 'equipments' array group.equipments.map((product) => { // Define below variable to match cat products only const catProducts = product["dealer-name"] === "DEALER NAME"; // If the dealer name is everything but cat products (aka only bfe products).. if (!catProducts) { // Loop through each 'photos' array product.photos.map(() => { // Then output the data // If year is undefined, replace with empty string output += ` <div class="card"> <img class="img-fluid" src=${product.photos[0].text} alt=${ product.model } /> <div class="card--body"> <h3>${product.year ?? ""} ${product.manufacturer} ${ product.model ?? "" }</h3> <p>${product.city ?? "City Not Available"}, ${product.state}</p> <p>${product.hours} hours</p> <p id="price">$${product.price?.text.toLocaleString() ?? ""}</p> <--- Not working <a href='https://used.battlefieldequipment.ca/en/${ product["group-code"] }/${ product["serial-number"] }' class="btn btn-primary">View Details</a> </div> </div> `; }); } }); }); // Add to slider $(".used-slider").slick("slickAdd", output); } getData();

¿Alguna idea de cómo puedo hacer que los precios de la API se muestren con una coma, haciendo que se muestren correctamente como números de miles?