¿cómo estás? Esta es la cuestión, he estado tratando de hacer un btn que ordene una variedad de productos por precio cuando el usuario hace clic en él, pero no funciona, y creo que es mi función de pedido usando ordenar, porque no entiendo la función de ordenación ya , esto es lo que estoy tratando de hacer:
function ordmayorPrecio(arrprod) { arr = arrprod.sort(function (a,b){ let precioa = parseInt(a.cost) let preciob = parseInt(b.cost) return precioa-preciob; }) } function ordmenorPrecio(arrprod) { arr = arrprod.sort(function (a,b){ let precioa = parseInt(a.cost) let preciob = parseInt(b.cost) return preciob-precioa; }) }Así es como estoy tratando de hacer que los botones funcionen:
document.addEventListener("DOMContentLoaded", function (e) { getJSONData(PRODUCTS_URL) .then((result) => result.data) .then((productdata) => mostrarProductos(productdata)); document.getElementById("sortDescPrice").addEventListener("click", function(){ mostrarProductos(ordmenorPrecio(productdata)); }); document.getElementById("sortAscPrice").addEventListener("click",function(){ mostrarProductos(ordmayorPrecio(productdata)); }) });Y así es como trato de agregarlo al HTML:
function mostrarProductos(arr){ let productosAppend = ''; for(let i = 0; i < arr.length; i++){ let producto = arr[i]; productosAppend += ` <a href="product-info.html" class="list-group-item list-group-item-action"> <div class="row"> <div class="col-3"> <img src="` + producto.imgSrc + `" alt="` + producto.description + `" class="img-thumbnail"> </div> <div class="col"> <div class="d-flex w-100 justify-content-between"> <h4 class="mb-1">`+ producto.name +`</h4> <small class="text-muted">` + producto.soldCount + ` artículos</small> </div> <small class="text-muted">` + producto.cost + " " + producto.currency + ` </small> <p class="mb-1">` + producto.description + `</p> </div> </div> </a> ` } document.getElementById("produto").innerHTML = productosAppend; }Su clasificación parece razonable, suponiendo que la API devuelve una matriz de objetos con una propiedad de cost . Pero luego debe devolver la matriz ordenada:
function ordmayorPrecio(arrprod) { return arrprod.sort(function (a, b) { let precioa = parseInt(a.cost) let preciob = parseInt(b.cost) return precioa - preciob; }) } function ordmenorPrecio(arrprod) { return arrprod.sort(function (a, b) { let precioa = parseInt(a.cost) let preciob = parseInt(b.cost) return preciob - precioa; }) } Los detectores de eventos deben tener una referencia al productdata de datos de producto de .then ; por el momento, no la tienen, en su lugar, están haciendo referencia a algo externo (¿que puede que ni siquiera exista?). Agregue los oyentes solo después de que regrese la respuesta.
document.addEventListener("DOMContentLoaded", function (e) { getJSONData(PRODUCTS_URL) .then((result) => result.data) .then((productdata) => { mostrarProductos(productdata); document.getElementById("sortDescPrice").addEventListener("click", function () { mostrarProductos(ordmenorPrecio(productdata)); }); document.getElementById("sortAscPrice").addEventListener("click", function () { mostrarProductos(ordmayorPrecio(productdata)); }) }) .catch(handleErrors); // don't forget this part });