Почему кнопка фильтра по цене не работает?

208

26 августа 2018, 18:30

При нажатии на <th> Price <th> товары должны сортироваться по цене, но этого не происходит. Помогите мне исправить это

//Product Creation Class 
class Product { 
    constructor(name, count, price) { 
        this.name = name; 
        this.count = count; 
        this.price = price; 
    } 
} 
Product.SORT_ORDER_ASC = 1; 
Product.SORT_ORDER_DESC = -1; 
//Сlass where products are recorded 
class Shop { 
    constructor(products) { 
        this.products = []; 
    } 
 
    //method for adding a product 
    addProduct(newProduct) { 
        this.products.push(newProduct); 
    } 
 
    //method for sorting the product at its price 
    sortProductsByPrice(sortOrder) { 
        const sorted = this.products.sort((a, b) => { 
            return a.price > b.price ? sortOrder : -sortOrder; 
        }); 
        return sorted; 
    } 
} 
let shop = new Shop(); 
shop.addProduct(new Product("product 1", 1, 2000)); 
shop.addProduct(new Product("item 2", 2, 100)); 
shop.addProduct(new Product("anything 4", 4, 1000)); 
 
const table = document.getElementById("shop"); 
const priceFilter = document.getElementById("filter"); 
for (let i = 0; i < shop.products.length; i++) { 
    //create table 
    table.innerHTML += `<tr><td>${shop.products[i].name}</td> 
    <td>${shop.products[i].price}</td> 
    <td>${shop.products[i].count}</td></tr>`; 
} 
//filter products by price 
priceFilter.addEventListener("click", (e) => { 
    shop.products.price.sortProductsByPrice(Product.Product.SORT_ORDER_ASC); 
}, false);

    <table id="shop"> 
        <caption>Products that are available in the store</caption> 
        <tr> 
            <th>Name:</th> 
            <th id="filter">Price:</th> 
            <th>Count:</th> 
        </tr> 
    </table>

Answer 1

Основная ошибка в том, что объекты вы отсортировали, а пересоздать таблицу забыли

Ну и в этой строке

shop.products.price.sortProductsByPrice(Product.Product.SORT_ORDER_ASC);

неправильно почти все.

//Product Creation Class 
class Product { 
  constructor(name, count, price) { 
    this.name = name; 
    this.count = count; 
    this.price = price; 
  } 
} 
 
Product.SORT_ORDER_ASC = 1; 
Product.SORT_ORDER_DESC = -1; 
//Сlass where products are recorded 
class Shop { 
  constructor(products) { 
    this.products = []; 
  } 
 
  //method for adding a product 
  addProduct(newProduct) { 
    this.products.push(newProduct); 
  } 
 
  //method for sorting the product at its price 
  sortProductsByPrice(sortOrder) { 
    const sorted = this.products.sort((a, b) => { 
      return a.price > b.price ? sortOrder : -sortOrder; 
    }); 
    return sorted; 
  } 
 
  show() { 
    const rows = document.querySelectorAll("#shop .data"); 
    for (let i = rows.length - 1; i >= 0; i--) { 
      const e = rows.item(i); 
      e.parentNode.removeChild(e); 
    } 
    const table = document.getElementById("shop"); 
    for (let i = 0; i < this.products.length; i++) { 
      //create table 
      table.innerHTML += `<tr class="data"><td>${this.products[i].name}</td> 
    <td>${this.products[i].price}</td> 
    <td>${this.products[i].count}</td></tr>`; 
    } 
  } 
} 
let shop = new Shop(); 
shop.addProduct(new Product("product 1", 1, 2000)); 
shop.addProduct(new Product("item 2", 2, 100)); 
shop.addProduct(new Product("anything 4", 4, 1000)); 
 
shop.show(); 
const priceFilter = document.getElementById("filter"); 
//filter products by price 
priceFilter.addEventListener("click", (e) => { 
  shop.sortProductsByPrice(Product.SORT_ORDER_ASC); 
  shop.show(); 
}, false);

<table id="shop"> 
  <caption>Products that are available in the store</caption> 
  <tr> 
    <th>Name:</th> 
    <th id="filter">Price:</th> 
    <th>Count:</th> 
  </tr> 
</table>