Searchkit Range过滤数据的最小值和最大值

时间:2018-03-20 08:10:58

标签: reactjs range searchkit

我在使我的范围过滤器更具动态性方面遇到了问题。

我有一个价格过滤器(RangeFilter),它使用RangeSliderInput作为rangeComponent。 看起来像这样: enter image description here

Filtercode:     

  <RangeFilter
    title="Prijs"
    field="verkoopprijs"
    id="verkoopprijs"
    min={0}
    max={100}
    showHistogram = {false}
    rangeComponent = {RangeSliderInput}
    translations={{"range.submit":"Zoeken"}}
  />

我想获得字段verkoopprijs的最小值和最大值,而不是硬编码的min 0和max 100。

搜索结果如下所示:

 "hits":{  
          "total":7271,
          "max_score":1.0,
          "hits":[  
             {  
                "_index":"onixts_prod",
                "_id":"9783932346729",
                "_score":1.0,
                "_source":{  
                   "id":"9783932346729",
                   "jaar":"2015",
                   "taal":"Duits",
                   "hoofdtitel":"Therapie-Handbuch Power Tube, Power QuickZap",
                   "verkoopprijs":38.95,
                }
             }
        ]
    }

然而。我不确定如何获得最小值和最大值。

1 个答案:

答案 0 :(得分:0)

根据您的搜索结果位于名为data的变量中,要获取verkoopprijs字段的最小值和最大值,您可以:

const min = data.hits.hits.reduce((min, curr) => curr.verkoopprijs < min.verkoopprijs ? curr : min, data.hits.hits[0]);
const max = data.hits.hits.reduce((max, curr) => curr.verkoopprijs > max.verkoopprijs ? curr : max, data.hits.hits[0]);

然后,在组件中将其用作min和max,如

<RangeFilter
    title="Prijs"
    field="verkoopprijs"
    id="verkoopprijs"
    min={min}
    max={max}
    showHistogram = {false}
    rangeComponent = {RangeSliderInput}
    translations={{"range.submit":"Zoeken"}}
/>