javascript - 排序数组,可能是菜鸟错误
问题描述
你好吗?这就是事情,我一直在尝试制作一个 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;
}
解决方案
假设 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;
})
}
事件侦听器需要引用productdata
来自的参数.then
- 目前,他们没有,他们正在引用外部的东西(甚至可能不存在?)。仅在响应返回后添加侦听器。
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
});
推荐阅读
- javascript - 从调用中取回值
- android - 如何使用接口将数据适配器传递给片段类?
- arrays - Python - 向数组添加键,计算子对象中的对象
- c++ - 如何在 OpenGL 的 3D 平面中显示一个圆?
- visual-studio-2017 - 有谁知道您是否可以在本地调试 Service Fabric 群集?
- r - 时间序列的数据转换
- html - WCAG 2.0 验证错误:在此上下文中,元素 span= 不允许作为元素 a 的子级。(抑制来自该子树的更多错误。)
- bash - 将 BASH 变量中的数据插入到 sql 查询中
- javascript - How to change the class of one object inside a Vue container?
- sql - PL/SQL:在 for 循环中加入语句