I am sorting item by price and alphabetically also. It sorts alphabetically perfectly fine. It is sorting price Array but not printing objects according to sorted price. Everything is doing perfect in console.log but when I select price low to high option its doesn't make any changes to items, while its making in console.
$(document.body).on('change', '#products-sorting', function() {
var priceArr = [];
var nameArr = [];
for (var i = 0; i < tempArr.length; i++) {
var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", "");
var name = $(tempArr[i]).find('.addToWishlist').data("name");
priceArr.push(price)
nameArr.push(name);
}
//sort by Price
for (var n = 0; n < priceArr.length; n++) {
for (var i = 0; i < tempArr.length; i++) {
//sort price low to high
if ($(this).val() === 'Price, low to high') {
priceArr.sort(function(a, b) {
return a - b
})
}
//sort price high to low
if ($(this).val() === 'Price, high to low') {
priceArr.sort(function(a, b) {
return b - a
})
}
var price = $(tempArr[i]).find('.addToWishlist').data("price").replace("$", "");
if (priceArr[n] == price)
$("#product-items").append(tempArr[i])
}
}
//console.log(priceArr)
//sort Alphabetically
for (var n = 0; n < nameArr.length; n++) {
for (var i = 0; i < tempArr.length; i++) {
//sort alphabetically A to Z
if ($(this).val() === 'Alphabetically, A to Z')
nameArr.sort();
//sort alphabetically Z to A
if ($(this).val() === 'Alphabetically, Z to A') {
nameArr.sort();
nameArr.reverse()
}
var name = $(tempArr[i]).find('.addToWishlist').data("name");
if (nameArr[n] == name)
$("#product-items").append(tempArr[i])
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-box" class="clearfix">
<label for="products">Sort by</label>
<select name="products" id="products-sorting">
<option value="Featured">Featured</option>
<option value="Alphabetically, A to Z">Alphabetically, A to Z</option>
<option value="Alphabetically, Z to A">Alphabetically, Z to A</option>
<option value="Price, low to high">Price, low to high</option>
<option value="Price, high to low">Price, high to low</option>
</select>
</div>You don't need to do your sorting inside loops. Just sort tempArr rather than copying to priceArr and nameArr. Then you can append tempArr to the container to display it in the sorted order.
$(document.body).on('change', '#products-sorting', function() {
function getPrice(el) {
return parseFloat($(el).find('.addToWishlist').data("price").replace("$", ""));
}
function getName(el) {
return $(el).find('.addToWishlist').data("name");
}
switch ($(this).val()) {
//sort price low to high
case 'Price, low to high':
tempArr.sort((a, b) => getPrice(a) - getPrice(b));
break;
//sort price high to low
case 'Price, high to low':
tempArr.sort((a, b) => getPrice(b) - getPrice(a));
break;
case 'Alphabetically, A to Z':
tempArr.sort((a, b) => getName(a).localeCompare(getName(b)));
break;
case 'Alphabetically, Z to A':
tempArr.sort((a, b) => getName(b).localeCompare(getName(a)));
break;
}
$("#product-items").empty().append(tempArr);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-box" class="clearfix">
<label for="products">Sort by</label>
<select name="products" id="products-sorting">
<option value="Featured">Featured</option>
<option value="Alphabetically, A to Z">Alphabetically, A to Z</option>
<option value="Alphabetically, Z to A">Alphabetically, Z to A</option>
<option value="Price, low to high">Price, low to high</option>
<option value="Price, high to low">Price, high to low</option>
</select>
</div>