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

Question

I have an array of objects that looks something like this:

    [{
    "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"
  }]

When I click on a button I want to be able to filter the objects in the array to return only matched objects that someone has searched for. For example if someone has typed 'land' the function should check if 'land' exists in the title of the component or if it exists in the hashtags array of that component.

I am using lodash to do this so would like to keep using this.

I have been able to do the test for the title but stuck on how to loop through the hashtags array as well when looking at the single component in the loop.

This is my code so far:

_.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

Return a Boolean from Array.prototype.filter() . You can use Array.prototype.some() , which also expects a Boolean return value, to check hashtags array.

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)
            })
});

using 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

it will give the object which has land word in their title

 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);