如何使用过滤器来搜索数组中对象的多个键值？

我有一个包含对象与每个数据葡萄酒的葡萄酒的数组：如何使用过滤器来搜索数组中对象的多个键值？

var wines = [ 
    { _id: '59a740b8aa06e549918b1fda', 
    wineryName: 'Some Winery', 
    wineName: 'Pinot Noir', 
    wineColor: 'Red', 
    imageLink: '/img/FortBerensPN.png' }, 
    { _id: '59a7410aaa06e549918b1fdb', 
    wineryName: 'Some Winery', 
    wineName: 'Pinot Gris', 
    wineColor: 'White', 
    imageLink: '/img/FortBerensPG.png' }, 
    { _id: '59a74125aa06e549918b1fdc', 
    wineryName: 'Some Winery', 
    wineName: 'Rose', 
    wineColor: 'Rose', 
    imageLink: '/img/FortBerensRose.png' }, 
    { _id: '59a74159aa06e549918b1fdd', 
    wineryName: 'Some other Winery', 
    wineName: 'Rose', 
    wineColor: 'Rose', 
    imageLink: '/img/FortBerensRose.png' }, 
    { _id: '59a7417aaa06e549918b1fde', 
    wineryName: 'Some other Winery', 
    wineName: 'Pinot Gris', 
    wineColor: 'White', 
    imageLink: '/img/FortBerensPG.png' }, 
    { _id: '59a8721f4fd43b676a1f5f0d', 
    wineryName: 'Some other Winery', 
    wineName: 'Pinot Gris', 
    wineColor: 'White', 
    imageLink: '/img/FortBerensPG.png' }, 
    { _id: '59a872244fd43b676a1f5f0e', 
    wineryName: 'Winery 3', 
    wineName: 'Pinot Noir', 
    wineColor: 'Red', 
    imageLink: '/img/FortBerensPN.png' } ]

我可以找出如何搜索 - 不区分大小写 - 用于葡萄酒对象，而指定对象的哪个键以搜索在，像这样：

var search = 'Noir' 

filteredWines = function() { 
    return wines.filter(function(wine){ 
    return (wine.wineName.toLowerCase().indexOf(search.toLowerCase())>=0; 
    }); 
};

[ { _id: '59a740b8aa06e549918b1fda', 
    wineryName: 'Some Winery', 
    wineName: 'Pinot Noir', 
    wineColor: 'Red', 
    imageLink: '/img/FortBerensPN.png' }, 
    { _id: '59a872244fd43b676a1f5f0e', 
    wineryName: 'Winery 3', 
    wineName: 'Pinot Noir', 
    wineColor: 'Red', 
    imageLink: '/img/FortBerensPN.png' } ]

但是，如果var search = 'Winery 3'或var search = 'red'那么它将obviousl y不返回结果，因为它正在查看数组中每个对象的值wineName。

那么有没有一种方法可以使用过滤器（或其他方法？）来搜索所有键值，甚至更好，多个指定键值并返回匹配对象的数组？

喜欢的东西：

filteredWines = function() { 
    return wines.filter(function(wine){ 
    return ((wine.wineName.toLowerCase() && wine.wineName.toLowerCase() 
      && wine.wineName.toLowerCase()).indexOf(search.toLowerCase())>=0; 
    }); 
};

还是我完全找错了树？

PS。我正在使用Vue.js 2，所以如果vue内部有更好的方法，那么我就是耳朵！

来源

2017-08-31 Jamie Curnow

应该为每个属性搜索一个值吗？或者你是否为每个属性指定了不同的搜索值？ – Bert

也许我误解了你的问题，但我认为只是使用OR运算符会起作用吗？你可以通过创建一个函数'（wine.wineName.toLowerCase（）。indexOf（search.toLowerCase（））> = 0'来清理这部分。或者，你可以使用正则表达式。 – Sia

顺便说一句，方法人最终张贴，但[计算属性]（https://vuejs.org/v2/guide/computed.html）将是在Vue中使用它的理想方式。 – Bert

你可以有一个更通用的功能，将扫描为字符串的所有属性。遍历所有特性值Object.values()并使用some尽快你有符合救助：

filteredWines = function (search) { 
    var lowSearch = search.toLowerCase(); 
    return wines.filter(function(wine){ 
     return Object.values(wine).some(val => 
      String(val).toLowerCase().includes(lowSearch) 
     ); 
    }); 
}

如果您希望通过特定的按键在搜索：

filteredWines = function (search, keys) { 
    var lowSearch = search.toLowerCase(); 
    return wines.filter(function(wine){ 
     return keys.some(key => 
      String(wine[key]).toLowerCase().includes(lowSearch) 
     ); 
    }); 
}

呼叫作为

filteredWines('Winery 3', ['wineryName', 'wineName']);

来源

2017-08-31 23:24:01 trincot

这是[Vueified]（https://codepen.io/Kradek/pen/RZvNgx?editors=1010）.. – Bert

这真棒谢谢你！并再次感谢@Bert为我提供美妙的祝福:) –

过滤器的作品。哎呀，我更仔细地读了一下这个问题。过滤器仍然有效，但您也必须过滤这些值。

let wines = [ 
 
    { 
 
     _id: '59a740b8aa06e549918b1fda', 
 
     wineryName: 'Some Winery', 
 
     wineName: 'Pinot Noir', 
 
     wineColor: 'Red', 
 
     imageLink: '/img/FortBerensPN.png' 
 
    }, 
 
    { 
 
     _id: '59a7410aaa06e549918b1fdb', 
 
     wineryName: 'Some Winery', 
 
     wineName: 'Pinot Gris', 
 
     wineColor: 'White', 
 
     imageLink: '/img/FortBerensPG.png' 
 
    }, 
 
    { 
 
     _id: '59a74125aa06e549918b1fdc', 
 
     wineryName: 'Some Winery', 
 
     wineName: 'Rose', 
 
     wineColor: 'Rose', 
 
     imageLink: '/img/FortBerensRose.png' 
 
    }, 
 
    { 
 
     _id: '59a74159aa06e549918b1fdd', 
 
     wineryName: 'Some other Winery', 
 
     wineName: 'Rose', 
 
     wineColor: 'Rose', 
 
     imageLink: '/img/FortBerensRose.png' 
 
    }, 
 
    { 
 
     _id: '59a7417aaa06e549918b1fde', 
 
     wineryName: 'Some other Winery', 
 
     wineName: 'Pinot Gris', 
 
     wineColor: 'White', 
 
     imageLink: '/img/FortBerensPG.png' 
 
    }, 
 
    { 
 
     _id: '59a8721f4fd43b676a1f5f0d', 
 
     wineryName: 'Some other Winery', 
 
     wineName: 'Pinot Gris', 
 
     wineColor: 'White', 
 
     imageLink: '/img/FortBerensPG.png' 
 
    }, 
 
    { 
 
     _id: '59a872244fd43b676a1f5f0e', 
 
     wineryName: 'Winery 3', 
 
     wineName: 'Pinot Noir', 
 
     wineColor: 'Red', 
 
     imageLink: '/img/FortBerensPN.png' 
 
    } 
 
]; 
 

 
let search = (val) => wines.filter(w => Object.values(w).filter(v => v.toLowerCase().indexOf(val.toLowerCase()) !== -1).length > 0); 
 

 
console.log(search('some'));

来源

2017-08-31 23:23:12 Will

我也建议尝试一种更通用的方法：

function getMatchingWhine(keys, searchTerm, wines) { 

    function extractTextFromKeys(keys, object) { 
    let text = ''; 
    keys.forEach(key => { 
     text += ' ' + object[key]; 
    }); 
    return text.toLowerCase(); 
    } 

    return wines.filter(wine => { 
    const relevantText = extractTextFromKeys(keys, wine); 
    return relevantText.includes(searchTerm.toLowerCase()); 
    }); 
}

来源

2017-08-31 23:47:51 jonahe

如何使用过滤器来搜索数组中对象的多个键值？

回答

相关问题