堆栈内存溢出
  繁体   English   中英

在javascript中使用多个对象值过滤数据

[英]Filter data using multiple object value in javascript

 原文  2022-06-23 14:10:40  9   4    javascript/ filter

问题描述

首先很抱歉这篇长文。 我知道以前有人问过这个问题，但现有的解决方案似乎不适用于我的情况。 但这并不能解决我的目的。

我的示例数据如下所示：

const data = [
  {
    id: 26201,
    title: "BusinessNZ Services Index",
    country: "USD",
    date: "19th Jun 6:30 PM",
    impact: "Low",
    forecast: "",
    previous: "51.4",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Sunday",
  },
  {
    id: 26202,
    title: "Rightmove HPI m/m",
    country: "GBP",
    date: "19th Jun 7:01 PM",
    impact: "Low",
    forecast: "",
    previous: "2.1%",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Sunday",
  },
  {
    id: 26203,
    title: "German PPI m/m",
    country: "EUR",
    date: "20th Jun 2:00 AM",
    impact: "Low",
    forecast: "1.5%",
    previous: "2.8%",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Sunday",
  },
  {
    id: 26204,
    title: "MPC Member Haskel Speaks",
    country: "GBP",
    date: "20th Jun 4:00 AM",
    impact: "Low",
    forecast: "",
    previous: "",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Monday",
  },
  {
    id: 26205,
    title: "Bank Holiday",
    country: "USD",
    date: "20th Jun 9:00 AM",
    impact: "Holiday",
    forecast: "",
    previous: "",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Monday",
  },
  {
    id: 26206,
    title: "MPC Member Mann Speaks",
    country: "GBP",
    date: "20th Jun 9:00 AM",
    impact: "Low",
    forecast: "",
    previous: "",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Monday",
  },
  {
    id: 26207,
    title: "ECB President Lagarde Speaks",
    country: "EUR",
    date: "20th Jun 9:00 AM",
    impact: "Medium",
    forecast: "",
    previous: "",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Monday",
  },
  {
    id: 26208,
    title: "ECB President Lagarde Speaks",
    country: "EUR",
    date: "20th Jun 11:00 AM",
    impact: "Medium",
    forecast: "",
    previous: "",
    created_at: "2022-06-23T13:15:02.000000Z",
    updated_at: "2022-06-23T13:15:02.000000Z",
    day: "Monday",
  },
];

我想使用多个值为 true 的对象过滤数据。

样本对象：

const countrys = {
  NZD: false,
  AUD: true,
  CAD: false,
  EUR: false,
  GBP: false,
  USD: true,
  CHF: false,
  JPY: false,
  CNY: false,
};
    
const days = {
  Sunday: true,
  Monday: false,
  Tuesday: true,
  Wednesday: false,
  Thursday: false,
  Friday: false,
};

const impacts = {
  Low: true,
  Medium: true,
  High: false,
  Holiday: false,
};

如果有或没有，我的过滤器数据将是所有对象真实值。

对于此示例，结果将是我的数据的第一个元素。

   {
            id: 26201,
            title: "BusinessNZ Services Index",
            country: "USD",
            date: "19th Jun 6:30 PM",
            impact: "Low",
            forecast: "",
            previous: "51.4",
            created_at: "2022-06-23T13:15:02.000000Z",
            updated_at: "2022-06-23T13:15:02.000000Z",
            day: "Sunday",
}

如果有一个或多个真值，则检查是否使用此对象，或者我只想跳过该对象。

我想做一个像这样的过滤器一个链接

4 个解决方案

解决方案1
 0  2022-06-23 14:27:29

这是一段代码

 const data = [ { id: 26201, title: "BusinessNZ Services Index", country: "USD", date: "19th Jun 6:30 PM", impact: "Low", forecast: "", previous: "51.4", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26202, title: "Rightmove HPI m/m", country: "GBP", date: "19th Jun 7:01 PM", impact: "Low", forecast: "", previous: "2.1%", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26203, title: "German PPI m/m", country: "EUR", date: "20th Jun 2:00 AM", impact: "Low", forecast: "1.5%", previous: "2.8%", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26204, title: "MPC Member Haskel Speaks", country: "GBP", date: "20th Jun 4:00 AM", impact: "Low", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26205, title: "Bank Holiday", country: "USD", date: "20th Jun 9:00 AM", impact: "Holiday", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26206, title: "MPC Member Mann Speaks", country: "GBP", date: "20th Jun 9:00 AM", impact: "Low", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26207, title: "ECB President Lagarde Speaks", country: "EUR", date: "20th Jun 9:00 AM", impact: "Medium", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26208, title: "ECB President Lagarde Speaks", country: "EUR", date: "20th Jun 11:00 AM", impact: "Medium", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, ]; const countrys = { NZD: false, AUD: true, CAD: false, EUR: false, GBP: false, USD: true, CHF: false, JPY: false, CNY: false, }; const days = { Sunday: true, Monday: false, Tuesday: true, Wednesday: false, Thursday: false, Friday: false, }; const impacts = { Low: true, Medium: true, High: false, Holiday: false, }; const newData = data.reduce((acc, val) => { const check = countrys[val.country] && days[val.day] && impacts[val.impact] if (check) { acc.push(val) } return acc; }, []); console.log('newData', newData)

解决方案2
 0  2022-06-23 14:27:50

我不会把整个事情写出来，但我认为你想做这样的事情：

const filterFunction = entry => {
  const dayCheck = days[entry.day]
  if (!dayCheck) return false
  // do this for all criteria
  return true
}

const filteredEntries = entries.filter(filterFunction)

我不是特别喜欢这种做事方法，因为它依赖于过滤器中的全局变量。 我会将其重构为过滤器类。

class EntryFilterer {
  constructor(dayFilters, countryFilters){
    this.dayFilters = dayFilters || {}
    this.countryFilters = countryFilters || {}
  }

  filter(entry){
    if (!this.dayFilters[entry.day]) return false
    if (!this.countryFilters[entry.country]) return false
    return true

  }
}

然后你有一些更灵活的代码可以与不同的过滤器一起使用。

const filterer = EntryFilterer(days, countries)
const filteredEntries = entries.filter(filterer.filter)

解决方案3
 0 已采纳  2022-06-23 14:32:22

您可以通过假设过滤器对象的名称对应于数据中的属性名称来使其通用，但采用“复数”形式，例如用于过滤country的countrys 。

您可以在一个对象中提供所有这些过滤器对象，其中这些名称是属性。 在示例中，此过滤器对象将是{countrys, days, impacts}

代码： 

 const multiFilter = (data, filters) => data.filter(o => Object.entries(filters).every(([key, bools]) => !Object.values(bools).includes(true) || bools[o[key.slice(0, -1)]] ) ); const data = [{id: 26201,title: "BusinessNZ Services Index",country: "USD",date: "19th Jun 6:30 PM",impact: "Low",forecast: "",previous: "51.4",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Sunday",},{id: 26202,title: "Rightmove HPI m/m",country: "GBP",date: "19th Jun 7:01 PM",impact: "Low",forecast: "",previous: "2.1%",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Sunday",},{id: 26203,title: "German PPI m/m",country: "EUR",date: "20th Jun 2:00 AM",impact: "Low",forecast: "1.5%",previous: "2.8%",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Sunday",},{id: 26204,title: "MPC Member Haskel Speaks",country: "GBP",date: "20th Jun 4:00 AM",impact: "Low",forecast: "",previous: "",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Monday",},{id: 26205,title: "Bank Holiday",country: "USD",date: "20th Jun 9:00 AM",impact: "Holiday",forecast: "",previous: "",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Monday",},{id: 26206,title: "MPC Member Mann Speaks",country: "GBP",date: "20th Jun 9:00 AM",impact: "Low",forecast: "",previous: "",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Monday",},{id: 26207,title: "ECB President Lagarde Speaks",country: "EUR",date: "20th Jun 9:00 AM",impact: "Medium",forecast: "",previous: "",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Monday",},{id: 26208,title: "ECB President Lagarde Speaks",country: "EUR",date: "20th Jun 11:00 AM",impact: "Medium",forecast: "",previous: "",created_at: "2022-06-23T13:15:02.000000Z",updated_at: "2022-06-23T13:15:02.000000Z",day: "Monday",},]; const countrys = {NZD: false,AUD: true,CAD: false,EUR: false,GBP: false,USD: true,CHF: false,JPY: false,CNY: false,}; const days = {Sunday: true,Monday: false,Tuesday: true,Wednesday: false,Thursday: false,Friday: false,}; const impacts = {Low: true,Medium: true,High: false,Holiday: false,}; console.log(multiFilter(data, {countrys, days, impacts}));

解决方案4
 0  2022-06-23 14:40:15

这是功能齐全的动态搜索方法。 它使用给定数据的键作为过滤键。 这意味着您可以通过在您的filterDefinitions对象中添加一些额外的键来扩展您的过滤器逻辑。 

 const data = [{ id: 26201, title: "BusinessNZ Services Index", country: "USD", date: "19th Jun 6:30 PM", impact: "Low", forecast: "", previous: "51.4", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26202, title: "Rightmove HPI m/m", country: "GBP", date: "19th Jun 7:01 PM", impact: "Low", forecast: "", previous: "2.1%", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26203, title: "German PPI m/m", country: "EUR", date: "20th Jun 2:00 AM", impact: "Low", forecast: "1.5%", previous: "2.8%", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Sunday", }, { id: 26204, title: "MPC Member Haskel Speaks", country: "GBP", date: "20th Jun 4:00 AM", impact: "Low", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26205, title: "Bank Holiday", country: "USD", date: "20th Jun 9:00 AM", impact: "Holiday", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26206, title: "MPC Member Mann Speaks", country: "GBP", date: "20th Jun 9:00 AM", impact: "Low", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26207, title: "ECB President Lagarde Speaks", country: "EUR", date: "20th Jun 9:00 AM", impact: "Medium", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, { id: 26208, title: "ECB President Lagarde Speaks", country: "EUR", date: "20th Jun 11:00 AM", impact: "Medium", forecast: "", previous: "", created_at: "2022-06-23T13:15:02.000000Z", updated_at: "2022-06-23T13:15:02.000000Z", day: "Monday", }, ]; const countrys = { NZD: false, AUD: true, CAD: false, EUR: false, GBP: false, USD: true, CHF: false, JPY: false, CNY: false, }; const days = { Sunday: true, Monday: false, Tuesday: true, Wednesday: false, Thursday: false, Friday: false, }; const impacts = { Low: true, Medium: true, High: false, Holiday: false, }; function filterEngine(array, filters) { var filterKeys = Object.keys(filters); return array.filter(function(item) { // validates all filter criteria return filterKeys.every(function(key) { // ignores non-function predicates if (typeof filters[key] !== 'function') { return true; } return filters[key](item[key]); }); }); } const filterDefinitions = { country: function(country) { return !!countrys[country]; }, day: function(day) { return !!days[day]; }, impact: function(impact) { return !!impacts[impact]; } // you can extend your filter by adding keys that existing on data. }; console.log(filterEngine(data, filterDefinitions));

您必须在对象中定义过滤器逻辑：

const filterDefinitions = {
  country: function(country) {
    return !!countrys[country];
  },
  day: function(day) {
    return !!days[day];
  },
  impact: function(impact) {
    return !!impacts[impact];
  }
  // you can extend your filter by adding keys that existing on data
  // key: function(value) {
  // // Filter logic for field comes here.
  // }
};

你可以这样使用：

const result = filterEngine(data, filterDefinitions);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按值过滤JavaScript对象 在 JavaScript 中过滤对象中的数据 按值过滤对象数据 使用JavaScript过滤数组对象的数组对象内的数据 在 JavaScript 中为 ArcGis 使用对象时如何为多个图层应用过滤器 按打字稿或javascript中的值过滤对象 使用键值过滤 javascript object 使用javascript使用数组过滤具有键和值对的对象 如何使用react和javascript根据输入字段中的值过滤数据？ 如何使用 Javascript 根据日期值过滤 JSON 数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM