使用.filter在Javascript中对数据进行排序

Posted 2021-04-13

基本上，我在做什么错？这是计算中的链式过滤器。

错误是'product.topic.sort'不是一个函数。

我正在尝试使用'select'来选择升序，降序，最高价和最低价的排序选项。

V模型将值绑定到js。

在过滤器下，我正在尝试添加一个基于'值'进行此排序的过滤器

如果value = undefined，则不执行任何操作。如果值= Az，则升序如果值= Za，降序如果值= Ph，价格高如果值= Pl，则价格低

编辑

在filteredSearch() {下，我还有其他过滤器，例如

  .filter(product => this.filters.some(filter => product.topic.match(filter))) || 
   this.products
  .filter(p => p.topic.toLowerCase().match(this.search.toLowerCase()))
  .filter(p => p.price <= this.priceFilter)

我想确保所有其他过滤器都可以与排序过滤器一起使用。

HTML

<div id="app">
            <h4>Sort</h4>  
                <select v-model="value">
                    <option value="Az">Ascending</option>
                    <option value="Za">Descending</option>
                    <option value="Ph">Price High</option>
                    <option value="Pl">Price Low</option>
                </select>



<div class="block" v-for="product in filteredSearch">
        <h3>{{product.topic}}</h3>
          <p>{{product.price}}</p>
</div>
</div>

JS

var app = new Vue({
            el: '#app',
            data: {
                products: [{
                        "topic": "english",
                        "price": "20"
                    },
                    {
                        "topic": "french",
                        "price": "60"
                    },
                    {
                        "topic": "science",
                        "price": "80"
                    }
                ],
                value: "",
            })



computed: {

filteredSearch() {
return this.products
.filter((product) => {
    if (!this.value)
        return true;
    if (this.value == "Az") {
        return product.topic.sort(function(a, b) {
            a.topic - b.topic
        });
    }
})
}
}
});

答案

这里是执行此操作的example。因此，我们有一个辅助方法getSorter，它查看您的v-model指令绑定到this.value的当前选择的值，并根据该值返回一个适当的函数以传递给sort。如果未选择任何内容，它将返回null。

在您的计算属性filteredSearch中，您可以根据需要应用现有的过滤器，然后对结果进行排序。

methods: {
    // determine the sorting function to use
    getSorter() { 
      switch (this.value) {
        case 'Za':
          return (a,b) => b.topic > a.topic ? 1 : a.topic == b.topic ? 0 : -1;
        case 'Az':
          return (a,b) => b.topic > a.topic ? -1 : a.topic == b.topic ? 0 : 1;
        case 'Ph':
          return (a,b) => b.price - a.price;
        case 'Pl':
          return (a,b) => a.price - b.price;
        default:
          return null;
      }
    }
  },
  computed: {
    filteredSearch: function() { 
      // apply existing filter logic
      var filteredProducts = this.products
        .filter((el) => true); // replace with your existing filter conditions here

      // apply sort function
      var sortFunction = this.getSorter();
      return sortFunction ? filteredProducts.sort(sortFunction) : filteredProducts;
    }
  }

另一答案

我认为您不应该在计算属性函数中使用过滤器，最好像这样进行排序

filteredSearch() {
return !this.value ? 
        true 
        : this.value == "Az" ? 
        this.products.sort((a, b) => a.topic > b.topic ? 1 : -1)
        : this.value == "Za" ?
        this.products.sort((a, b) => a.topic < b.topic ? 1 : -1)
        : this.value == "Pl" ? 
        this.products.sort((a, b) => a.price - b.price)
        : this.value == "Ph" ?
        this.products.sort((a, b) => b.price - a.price)
        : null;
}

另一答案

尝试一下。

对数字进行排序以升序（1、2、3 ...）：function（a，b）{return a-b;}

以降序（9，8，7 ...）：function（a，b）{return b-a;}] >>

对字符串排序以升序排列（A，B，C ...）：function（a，b）{return a> b？ 1：-1；}

以降序（Z，Y，X ...）：function（a，b）{return b> a？ 1：-1；}

    getData() {
            let value = "Ph";
            let t = [{
                "topic": "english",
                "price": "20"
            },
                {
                    "topic": "french",
                    "price": "60"
                },
                {
                    "topic": "science",
                    "price": "80"
                }
            ]
            if (value == '') {
                return t
            } else if (value == 'az') {
                t.sort(function (a, b) {
                    return a.topic > b.topic ? 1 : -1;
                })
                return t
            } else if (value == 'za') {
                t.sort(function (a, b) {
                    return b.topic > a.topic ? 1 : -1;
                })
                return t
            } else if (value == 'Ph') {
                t.sort(function (a, b) {
                    return b.price - a.price;
                })
                return t
            } else if (value == 'Pl') {
                t.sort(function (a, b) {
                    return a.price - b.price;
                })
                return t
            }
        }