Question

我正在尝试根据博客的帖子的位置和年龄范围元字段来过滤由SHOPIFY API提取的JSON对象填充的数组。
我能够成功地分别过滤每个过滤器，但无法弄清楚如何将两者组合为一个函数。前端的过滤器如下：

<div class="row">
  <select class="select">
    <option value="">–Select Location–</option>
    <option value="Uptown Location">Uptown Location</option>
    <option value="18th Street Location">18th Street Location</option>
    <option value="Both">Both</option>
  </select>

  <div class="slidecontainer">
    <input type="range" min="0" max="16" value="0" class="slider" id="myRange">
    <p>Age: <span id="demo">All Ages</span></p>
  </div>
</div>

在JavaScript方面，我有以下内容：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

//For the location filter
$(document).on('change', 'select', function () {
  var expr = this.val();
  var filterArticles;
  if (expr === 'Both' || expr === '') {
    filterArticles = articles;
  } else {
    //metafield array object 2 is the location object
    filterArticles = articles.filter(a => a.metafields[2].value === expr);
  }

  filterArticles.forEach((article, index) => {
    createBlock(article);
  });
});

//For the age range filter

slider.oninput = function () {

  if (slider.value == 0) {
    output.innerHTML = "All Ages";
  } else {
    output.innerHTML = this.value;
  }

  removeEvents();
  articles.forEach((article, index) => {

    //metafield object 4 is the lower value of the age range 
    //metafield object 3 is the higher value of the age range

    if (article.metafields[4].value <= slider.value && slider.value <= article.metafields[3].value) {
      createBlock(article);
      ageArticles.push(index);
    } else if (slider.value == 0) {
      createBlock(article);
    }
  })
}

这是数组中的JSON对象的样子：

{
    author: "Kevin Cadena"
    blog_id: 43130421348
    body_html: ""
    created_at: "2019-02-07T18:52:26-05:00"
    handle: "this-should-be-the-oldest-post"
    id: 16006512740
    metafields: Array(5)
    0: {id: 6030994604132, namespace: "global", key: "Event-Date", value: "1553140800", value_type: "string", …}
    1: {id: 6013532012644, namespace: "global", key: "Event-Time", value: "6:00pm-8:00pm", value_type: "string", …}
    2: {id: 6013531979876, namespace: "global", key: "Location", value: "18th Street Location", value_type: "string", …}
    3: {id: 6336530120804, namespace: "global", key: "N-AgeHigh", value: "5", value_type: "string", …}
    4: {id: 6336528711780, namespace: "global", key: "N-AgeLow", value: "2", value_type: "string", …}
    length: 5
    __proto__: Array(0)
    published_at: "2019-02-19T06:00:00-05:00"
    summary_html: ""
    tags: ""
    template_suffix: null
    title: "March 21st"
    updated_at: "2019-02-26T16:49:50-05:00"
    user_id: 26314276964
    __proto__: Object

}

Answer 1

您将需要对代码进行一些更改。我无法为您提供完整的解决方案，但这会帮助您入门

articles = [{age: '1', location: 'xxx'}, ...]
// first, create a copy of your articles array    
articlesCopy = ....;

// store each selected string value from the input boxes or select option onto the filterParameters object
filterParameters = {
  location: null,
  age: null
};

filterArticles() {
  const temp = this.articlesCopy.filter(article => {
    const ageMatch = article['age'].indexOf(this.filterParameters['age']) !== -1 || !this.filterParameters['location'];
    const locationMatch = article['location'].indexOf(this.filterParameters['location']) !== -1 || !this.filterParameters['age'];

    return ageMatch && locationMatch;
  });
  this.articles = temp;
}

具有多个变化类别的过滤器阵列

1 个答案: