如何遍历对象数组并使用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数组中。

我正在使用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

从Boolean返回Array.prototype.filter()。您可以使用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);