如何遍历对象数组并使用lodash检查值是否匹配对象中的字符串或项目数组中的值

Question

我有一个看起来像这样的对象数组：

    [{
    "title": "first footer",
    "section": "structure",
    "categoryId": "footer",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wobble"],
    "uId": "footerA"
  },{
    "title": "second footer",
    "section": "structure",
    "categoryId": "footer",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "footerB"
  },
  {
    "title": "first header",
    "section": "structure",
    "categoryId": "header",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "headerA"
  },
  {
    "title": "second header",
    "section": "structure",
    "categoryId": "header",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "headerB"
  },
  {
    "title": "first landing",
    "section": "structure",
    "categoryId": "landing",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "landingA"
  },
  {
    "title": "second landing",
    "section": "structure",
    "categoryId": "landing",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "landingB"
  },
  {
    "title": "third landing",
    "section": "structure",
    "categoryId": "landing",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "landingC"
  },
  {
    "title": "first nav",
    "section": "structure",
    "categoryId": "navigation",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wobble"],
    "uId": "navA"
  },{
    "title": "first blog",
    "section": "components",
    "categoryId": "blog",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "blogA"
  },
  {
    "title": "second blog sdf wicked",
    "section": "components",
    "categoryId": "blog",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "blogB"
  },
  {
    "title": "first header",
    "section": "components",
    "categoryId": "contact_button",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "contact_buttonA"
  },
  {
    "title": "first landing",
    "section": "components",
    "categoryId": "content_bloc",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "content_blocA"
  },
  {
    "title": "second landing",
    "section": "components",
    "categoryId": "content_bloc",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "content_blocB"
  },
  {
    "title": "third landing",
    "section": "components",
    "categoryId": "content_bloc",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "content_blocC"
  },
  {
    "title": "first nav",
    "section": "components",
    "categoryId": "cover",
    "image": "http://placehold.it/350x220",
    "hashtags": ["#popin", "#wibble"],
    "uId": "coverA"
  }]

当我单击按钮时，我希望能够过滤数组中的对象，以仅返回某人已搜索的匹配对象。 例如，如果有人键入了“ land”，则该函数应检查组件的标题中是否存在“ land”或该组件的hashtags数组中是否存在“ land”。

我正在使用lodash来做到这一点，所以想继续使用它。

我已经能够对标题进行测试，但是在查看循环中的单个组件时仍然停留在如何遍历hashtags数组的问题上。

到目前为止，这是我的代码：

_.filter(this.components, function (component) {
  //Check if components title has 'wic' in the text or if 'wic' exists in the hashtags array
  if(_.includes(component.title, 'wic')) {
    console.log(component);
  }

});

Answer 1

从Array.prototype.filter()返回一个Boolean 。 您可以使用Array.prototype.some() （它也需要一个Boolean值）来检查hashtags数组。

var match = "land";
var re = new RegExp(match);
var res = this.components.filter(function(component) {
  return re.test(component.title) 
         || component.hashtags.some(function(tag) {
              return re.test(tag)
            })
});

使用lodash _.filter() ， _.some()

var match = "land";
var re = new RegExp(match);
var res = _.filter(this.components, function(component) {
console.log(component.title,  re.test(component.title) )
  return re.test(component.title) 
         || _.some(component.hashtags, function(tag) {
              return re.test(tag)
            })
});

jsfiddle https://jsfiddle.net/o8ervt0x/

Answer 2

它会给它有对象land在他们的标题字

 savedViews= [{ "title": "first footer", "section": "structure", "categoryId": "footer", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wobble"], "uId": "footerA" },{ "title": "second footer", "section": "structure", "categoryId": "footer", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "footerB" }, { "title": "first header", "section": "structure", "categoryId": "header", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "headerA" }, { "title": "second header", "section": "structure", "categoryId": "header", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "headerB" }, { "title": "first landing", "section": "structure", "categoryId": "landing", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "landingA" }, { "title": "second landing", "section": "structure", "categoryId": "landing", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "landingB" }, { "title": "third landing", "section": "structure", "categoryId": "landing", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "landingC" }, { "title": "first nav", "section": "structure", "categoryId": "navigation", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wobble"], "uId": "navA" },{ "title": "first blog", "section": "components", "categoryId": "blog", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "blogA" }, { "title": "second blog sdf wicked", "section": "components", "categoryId": "blog", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "blogB" }, { "title": "first header", "section": "components", "categoryId": "contact_button", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "contact_buttonA" }, { "title": "first landing", "section": "components", "categoryId": "content_bloc", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "content_blocA" }, { "title": "second landing", "section": "components", "categoryId": "content_bloc", "image": "http://placehold.it/350x220", "hashtags": ["#popin", "#wibble"], "uId": "content_blocB" }, { "title": "third landing", "section": "components", "categoryId": "content_bloc", "image": "http://placehold.it/350x220", "hashtags": ["#popn", "#wibble"], "uId": "content_blocC" }, { "title": "first nav", "section": "components", "categoryId": "cover", "image": "http://placehold.it/350x220", "hashtags": ["#popn", "#wibble"], "uId": "coverA" }] var view = 'land'; var re = new RegExp(view); var delete_id = savedViews.filter(function (el) { return re.test(el.title); }); //console.log(delete_id); var view1 = 'popin'; var re1 = new RegExp(view1); var delete_id1 = delete_id.filter(function (el) { return re1.test(el.hashtags); }); console.log(delete_id1);