Lodash帮助使用搜索词和多个属性名称进行过滤

时间:2016-04-01 10:23:27

标签: javascript lodash angularjs-filter

我希望搜索多个列,但是我在互联网上找到的所有代码都限制在一个搜索多个列的搜索词中。我希望通过多个搜索字词过滤多个列

数据:

var propertynames = ['firstName','lastName'];
var data = [
  {
    "city":"Irwin town",
    "address":"1399 Cecil Drive",
    "lastName":"Auer",
    "firstName":"Wanda"
  },
  {
    "city":"Howell haven"
    "address":"168 Arnoldo Light"
    "lastName":"Balistreri",
    "firstName":"Renee"
  }
];
var searchTerm = 'Wanda Auer';

应该导致过滤掉第二个对象的数组。 谢谢!

3 个答案:

答案 0 :(得分:1)

我为您的问题创建了两个解决方案。第一个是你需要的:按两个字段过滤集合。第二个更灵活,因为它允许通过任何多个字段进行过滤。

第一个解决方案:

function filterByTwoFields(coll, searchFilter) {
  return _.filter(coll, function(item) {
    return (item.firstName + ' ' + item.lastName) === searchTerm;
  });
}

var data = [
  {
    "city":"Irwin town",
    "address":"1399 Cecil Drive",
    "lastName":"Auer",
    "firstName":"Wanda"
  },
  {
    "city":"Howell haven",
    "address":"168 Arnoldo Light",
    "lastName":"Balistreri",
    "firstName":"Renee"
  }
];
var searchTerm = 'Wanda Auer';

var result = filterByTwoFields(data, searchTerm);
alert(JSON.stringify(result));
<script src="https://raw.githubusercontent.com/lodash/lodash/master/dist/lodash.min.js"></script>

第二个解决方案:

function filterByMultipleFields(coll, filter) {
  var filterKeys = _.keys(filter);
  return _.filter(coll, function(item) {
    return _.every(filterKeys, function(key) {
      return item[key] === filter[key];
    });
  });
}

var data = [
  {
    "city":"Irwin town",
    "address":"1399 Cecil Drive",
    "lastName":"Auer",
    "firstName":"Wanda"
  },
  {
    "city":"Howell haven",
    "address":"168 Arnoldo Light",
    "lastName":"Balistreri",
    "firstName":"Renee"
  }
];

var filter = {
  firstName: 'Wanda',
  lastName: 'Auer'
}
var result = filterByMultipleFields(data, filter);
alert(JSON.stringify(result));
<script src="https://raw.githubusercontent.com/lodash/lodash/master/dist/lodash.min.js"></script>

答案 1 :(得分:0)

不是最有效但却能胜任。您可能希望对属性值进行非区分大小写的比较:

var searchTerm = 'Wanda Auer',
    splitted = searchTerm.split(' ');

var result = data.filter(function(item){  
    return window.Object.keys(item).some(function(prop){
        if(propertynames.indexOf(prop) === -1)
            return;
        return splitted.some(function(term){
            return item[prop] === term;
      });
  });
});

https://jsfiddle.net/3g626fb8/1/

编辑:刚刚注意到了Lodash标签。如果要使用它,框架使用与数组原型相同的函数名称,即_.filter_.some

答案 2 :(得分:0)

这是一个非常简单的lodash版本:

http://www.speedtest.net/
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:M47_v0xF3m8J
http://www.speedtest.net/%252Btest%26gbv%3D1%26%26ct%3Dclnk
http://www.speedtest.net/results.php
http://www.speedtest.net/mobile/
http://www.speedtest.net/about.php
https://support.speedtest.net/
https://en.wikipedia.org/wiki/Test
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:R94CAo00wOYJ
https://en.wikipedia.org/wiki/Test%252Btest%26gbv%3D1%26%26ct%3Dclnk
https://www.test.com/
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:S92tylTr1V8J
https://www.test.com/%252Btest%26gbv%3D1%26%26ct%3Dclnk
https://www.speakeasy.net/speedtest/
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:sCEGhiP0qxEJ:https://www.speakeasy.net/speedtest/%252Btest%26gbv%3D1%26%26ct%3Dclnk
https://www.google.com/webmasters/tools/mobile-friendly/
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:WBvZnqZfQukJ:https://www.google.com/webmasters/tools/mobile-friendly/%252Btest%26gbv%3D1%26%26ct%3Dclnk
http://www.humanmetrics.com/cgi-win/jtypes2.asp
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:w_lAt3mgXcoJ:http://www.humanmetrics.com/cgi-win/jtypes2.asp%252Btest%26gbv%3D1%26%26ct%3Dclnk
http://speedtest.xfinity.com/
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:snNGJxOQROIJ:http://speedtest.xfinity.com/%252Btest%26gbv%3D1%26%26ct%3Dclnk
https://www.act.org/content/act/en/products-and-services/the-act/taking-the-test.html
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:1sMSoJBXydo
https://www.act.org/content/act/en/products-and-services/the-act/taking-the-test.html%252Btest%26gbv%3D1%26%26ct%3Dclnk
https://www.16personalities.com/free-personality-test
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:SQzntHUEffkJ
https://www.16personalities.com/free-personality-test%252Btest%26gbv%3D%26%26ct%3Dclnk
https://www.xamarin.com/test-cloud
http://webcache.googleusercontent.com/search%3Fhl%3Den%26biw%26bih%26q%3Dcache:ypEu7XAFM8QJ:
https://www.xamarin.com/test-cloud%252Btest%26gbv%3D1%26%26ct%3Dclnk

根据所选属性名称值是否与搜索词标记相交,过滤对象。