Question

0

41

Views

Sorting arrays, probably rookie mistake

how are u? This is the thing, ive been trying to make a btn that order an array of products by price when the user clicks on it, but its not working, and i think is my ordering function using sort, cause i dont quite get sort function already, this is what im trying to do:

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

This is how im trying to make the buttons functional:

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

});

And this is how I try to append it to the 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;
}

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-31T06:07:17.407Z

Your sorting looks reasonable, assuming that the API returns an array of objects with a cost property. But you then need to return the sorted array:

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

The event listeners need to have a reference to the productdata argument from the .then - at the moment, they don't, they're referencing something outside instead (which may not even exist?). Add the listeners only after the response comes back.

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