过滤多个数组对象并将键值与多个值匹配在Javascript中形成另一个数组

Question

现在已经绞尽脑汁了几个晚上，我希望善良的灵魂可以帮助解决我撞到的这堵墙。

我有一个对象数组。

作为用户，我应该能够通过多个或单个过滤器过滤功能名称。 单个过滤器应返回具有匹配名称的所有事件 多重过滤器应匹配具有多个特征名称的所有事件，不少于 2 或过滤器数组的长度。

我最终被困住的代码是这样的。

let obj1 = [{
  "results": [{
      "id": "1",
      "name": "Event 1",
      "feature": [{
          "id": {
            "target": "78"
          },
          "name": "Bronze"
        },
        {
          "id": {
            "target": "27"
          },
          "name": "Straw"
        },
        {
          "id": {
            "target": "45"
          },
          "name": "Gold"
        }
      ]
    },
    {
      "id": "2",
      "name": "Event 2",
      "feature": [{
        "id": {
          "target": "20"
        },
        "name": "Straw"
      }]
    },
    {
      "id": "3",
      "name": "Event 3",
      "feature": [{
          "id": {
            "target": "20"
          },
          "name": "Gold"
        },
        {
          "id": {
            "target": "20"
          },
          "name": "Straw"
        }
      ]
    },
    {
      "id": "4",
      "name": "Event 4",
      "feature": [{
          "id": {
            "target": "97"
          },
          "name": "Coal"
        },
        {
          "id": {
            "target": "39"
          },
          "name": "Wood"
        }
      ]
    }
  ]
}]


let filterQuery = ['Straw', 'Gold'];


obj1 = obj1[0].results.filter(r => {
  return r.feature.every(f => {
    return filterQuery.includes(f.name)
  })
})

console.log(obj1);

它用Straw 或Gold 过滤任何东西，用稻草和黄金过滤所有东西

我正在尝试让过滤器过滤稻草和黄金

所以用例子返回一个事件

{name: 'Straw', name: 'Gold', name: 'Diamond', name: Copper}

将是正确的匹配，因此用户可以向数组添加另一个过滤器以进一步过滤结果。

{ name: Straw, name: Diamond }

不会是正确的匹配。

任何帮助，建议将不胜感激:)

================================================ =============

已更新，已解决的解决方案。我需要它尽可能不可知，所以如果键名发生变化，它就可以工作。在一个带有 Drupal 的 Vuejs 项目中使用。

    export default class FilterData {
    
      constructor(name, data, filter_query) {
        this.name = name;
        this.data = data;
        this.filter_query = filter_query;
      }
    
      filterData(){
        let temp = this.data

// filter out any undefined arrays
        temp = temp.filter((item) => item[this.name] !== undefined);
        temp = temp.filter((item) =>
          [this.filter_query].every((filter) =>
            item[this.name].some(({ name }) => name === filter)
          )
        );
        return temp
      }
    
    }

然后像这样使用它

/* use a temp copy of the returned data from the api
so we can keep refiltering from multiple drop downs, radio, checkboxes changes each time a filter keyname is un-selected.
*/

let apiResults = this.apiData.results;

      let filtered = new FilterData(
        `${keyname}`,
        apiResults,
        this.filterQuery[`${keyname}`]
      );

非常感谢@pilchard，您的回答对此有很大帮助。

Answer 1

您需要将every() 调用切换到filterQuery 数组。所以测试过滤器数组中的every()字符串是否在feature数组中匹配，这里用some()测试。

let obj1 = [{ "results": [{ "id": "1", "name": "Event 1", "feature": [{ "id": { "target": "78" }, "name": "Bronze" }, { "id": { "target": "27" }, "name": "Straw" }, { "id": { "target": "45" }, "name": "Gold" }] }, { "id": "2", "name": "Event 2", "feature": [{ "id": { "target": "20" }, "name": "Straw" }] }, { "id": "3", "name": "Event 3", "feature": [{ "id": { "target": "20" }, "name": "Gold" }, { "id": { "target": "20" }, "name": "Straw" }] }, { "id": "4", "name": "Event 4", "feature": [{ "id": { "target": "97" }, "name": "Coal" }, { "id": { "target": "39" }, "name": "Wood" }] }] }]

let filterQuery = ['Straw', 'Gold'];

const filteredObj = obj1[0].results.filter(({ feature }) =>
  filterQuery.every(filter =>
    feature.some(({ name }) => name === filter)))

console.log(filteredObj);