【问题标题】:Filter data based on Object with filter values基于具有过滤值的对象过滤数据
【发布时间】:2019-09-08 05:58:58
【问题描述】:

我的应用中有一些过滤器。每当我单击搜索时,应根据搜索值过滤数据。我不知道是否有更好的方法可以以更酷的方式或花哨的方式来做我想做的事情。搜索值的存储方式如下:

FORM_VALUES =
   {
     title: '',
     name: 'John',
     Age: 56
    }

如果对象的值为空'',那么我在过滤对象数组时不应该考虑它们。 我的对象数组如下所示:

[
 {
   title:'CEO',
   name: 'John',
   Age: 56
 },
 {
   title: null,
   name: 'George',
   Age: 56
 },
]

在本例中,它应该返回数组的第一个元素。

我的代码:

data.filter(d => {
     if ((d.title === FORM_VALUES.title || FORM_VALUES.title === '')
        && (d.name === FORM_VALUES.name || FORM_VALUES.name === '')
        && (d.age === FORM_VALUES.age || FORM_VALUES.age === '')) {
           return d;
      }
 });

【问题讨论】:

    标签: javascript arrays json object ecmascript-6


    【解决方案1】:

    使用filter 获取具有值的人,使用Object.keysdelete 删除任何空条目,使用everyObject.entries 查找实际对象:

    const FORM_VALUES = {
      title: '',
      name: 'John',
      Age: 56
    }
    
    const data = [{
        title: 'CEO',
        name: 'John',
        Age: 56
      },
      {
        title: null,
        name: 'George',
        Age: 56
      }
    ];
    
    let searchObj = { ...FORM_VALUES };
    Object.keys(searchObj).forEach(key => searchObj[key] == "" ? delete searchObj[key] : key);
    
    const found = data.filter(d => Object.entries(searchObj).every(([k, v]) => d[k] == v));
    console.log(found);

    【讨论】:

    • 也许我的问题并不清楚。你的答案只会返回一个正确的值吗?它应该返回一个数组。在我提供的示例中,它只返回第一个值,因为它是唯一符合搜索条件的值
    • 已编辑@yayfubofubo。
    【解决方案2】:

    使用Object.entries()FORM_VALUES 对象中获取键/值对数组。使用 Array.every() 对每对数组进行迭代,如果值 ''(空字符串)或过滤器的值与当前对象的值匹配,则返回 true

    const FORM_VALUES = {"title":"","name":"John","Age":56}
    
    const data = [{"title":"CEO","name":"John","Age":56},{"title":null,"name":"George","Age":56}]
    
    const result = data.filter(o =>
      Object.entries(FORM_VALUES)
        .every(([k, v]) => v === '' || o[k] === v)
    )
    
    console.log(result)

    【讨论】:

      猜你喜欢
      • 2020-12-11
      • 2020-07-04
      • 1970-01-01
      • 2016-02-14
      • 2022-01-22
      • 2016-11-17
      • 1970-01-01
      • 2019-04-29
      • 2021-07-05
      相关资源
      最近更新 更多