排序数组，可能是菜鸟错误

Question

你好吗？这就是事情，我一直在尝试制作一个 btn，当用户点击它时按价格订购一系列产品，但它不起作用，我认为这是我使用排序的排序功能，因为我已经不太了解排序功能了，这就是我想要做的：

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;
})
}

这就是我尝试使按钮起作用的方式：

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));
})

});

这就是我尝试将其附加到 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;
}

Answer 1

假设 API 返回具有cost 属性的对象数组，您的排序看起来是合理的。但是你需要返回排序后的数组：

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;
    })
}

事件侦听器需要引用来自.then 的productdata 参数——目前，他们没有，而是引用了外部的东西（甚至可能不存在？）。仅在响应返回后添加侦听器。

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
});