How to loop through array of objects and check if a value matches either a string in the object or a value in an array of items using 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);
  }

});

guest271314 · Accepted Answer

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/

How to loop through array of objects and check if a value matches either a string in the object or a value in an array of items using lodash

Answers (2)

Related Questions