Qfyilyi

I'm trying to return the object that contains the value (any letter matching in any object) in search field.

I want to return the object that the array inside an array of object matches.

Example:

if

search = 'dog'

then I want to return

[{name: Jake, last: DK, tags: ['fun','dog','cat']}]

Or if

search = 'a' return [{name: Jake, last: DK, tags: ['fun','dog','cat']},{name: John, last: Hop, tags: ['boring','mouse','trap']}]

My attempt:

this.state = {

search = '',

arr = [{name: Jake, last: DK, tags: ['fun','dog','cat']},

       {name: John, last: Hop, tags: ['boring','mouse','trap']}]

}

//asuming the arr is stored in state

let filteredTag = this.state.arr.filter(obj => {

      if (obj.tags !== undefined) {

      return (

        obj.tags.filter(tag => {

          return tag.includes(this.state.search)

        })

      )

      }

    })

Also, I have

if (obj.tags !== undefined) {

because its a list that appears on click of a button and its undefined initially when page render.

The return value of filter should be true/false depending on whether you want the particular element.With that in mind,you need to make following changes.

let filteredTag = this.state.arr.filter(obj => {

  if (obj.tags !== undefined) {

  return (

    obj.tags.filter(tag => {

      return tag.includes(this.state.tagSearch)

    }).length > 0 // since if tag has any element matching,filtered tags length can be checked

  )

  }

  return false // since in undefined case,search condition is not met.

})

You need to return true or false in the callback function of filter. For example, student.tags.filter( has a correct callback function since it returns either true or false. However, this.state.arr.filter(obj => { does not return a boolean. Here's how it should be changed:

//asuming the arr is stored in state

let filteredTag = this.state.arr.filter(obj => {

    if (obj.tags === undefined) return false;

    var result = student.tags.filter(tag => {

       return tag.includes(this.state.tagSearch)

    });

    return result.length > 0;

})

You can use a combination of filter and some to find all objects that have tags that "match" the search term (a match is defined as tag.includes(term)):

function search(term, arr) {

  return (arr || ).filter(e => (e.tags || ).some(t => t.includes(term)));

}



var data = [{

    name: 'Jake',

    last: 'DK',

    tags: ['fun', 'dog', 'cat']

  },

  {

    name: 'John',

    last: 'Hop',

    tags: ['boring', 'mouse', 'trap']

  }

];



console.log(search('dog', data));

console.log(search('a', data));

console.log(search('dog', undefined));

in this method, you return many elements that have the same tag:

var arr = [{name: 'Jake', last: 'DK', tags: ['fun','dog','cat']},

           {name: 'John', last: 'Hop', tags: ['boring','mouse','trap']},

			{name: 'Demian', last: 'Bibiano', tags: ['dog','cat','trap']}];



function search(searchText){

	var ret =  

	arr.forEach(function (element){	

		if(element.tags.includes(searchText)){

			ret.push(element)

        }

	})

	return ret;

}



console.log(search("dog"));

This would be simple if you just wanted to find the whole term. Since you want to find partial terms as well, you need to look at each tag. some() is really useful for that because you can set a condition and it reuturns a boolean, which is what you need here:

let arr = [{name: 'Jake', last: 'DK', tags: ['fun','dog','cat']},

           {name: 'John', last: 'Hop', tags: ['boring','mouse','trap']}]



let term = 'dog'

let found = arr.filter(item => 

  /* return a boolean here */

  /* && will short circuit returning false if there's no tags */

  /* some will return true if any word contains term */

  item.tags && item.tags.some(word => word.includes(term))

)

console.log(found)



// also works with `a`



term = 'a'

found = arr.filter(item => 

  item.tags && item.tags.some(word => word.includes(term))

)

console.log(found)