How to filter an array of objects with array as one of the object parameters?

Question

I've got this object:

this.contacts = [
            {
                name: "",
                el: ["one", "two"]
            },
            {
                name: "",
                el: ["three", "four"]
            }]

How to filter the above so for example only the first object is returned when I search for "two"?

My try so far:

filterItems(searchTerm) {

    return this.contacts.filter((item) => {
        return item.el.filter((user) => {
            return user.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
        })
    });

}

It doesn't return anything of course, why?

If you have another object with 'two' in it, should it return that object as well or should it stop after first successful match? — Matt
– Matt, Commented Oct 17, 2017 at 19:14

Nina Scholz · Accepted Answer · 2017-10-17 11:43:49Z

2

You could use Array#includes and take it as filter condition.

function filterItems(user) {
    return this.contacts.filter(item => item.el
        .map(s => s.toLowerCase())
        .includes(user.toLowerCase()))
}

var contacts = [{ name: "", el: ["one", "two"] }, { name: "", el: ["thrEE", "four"] }];

console.log(filterItems('THREE'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Oct 17, 2017 at 11:43

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George · Accepted Answer · 2017-10-17 11:42:59Z

1

Inside the first .filter you should use .some

var contacts = [{
    name: "",
    el: ["one", "two"]
  },
  {
    name: "",
    el: ["three", "four"]
  }
]

filterItems = function(searchTerm) {
  return contacts.filter((item) => {
    return item.el.some((user) => {
      return user.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    })
  });
}

console.log(filterItems("two"))

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Oct 17, 2017 at 11:42

George

6,7592 gold badges31 silver badges36 bronze badges

Comments

Nick Parsons · Accepted Answer · 2017-10-17 11:55:10Z

If you wish to achieve a similar effect but by using loops you could use the following function:

function filterItems(search) {
    for(let i = 0; i < this.contacts.length; i++) {
        let obj = this.contacts[i];
        for(let j = 0; j < obj.el.length; j++) {
            if(obj.el[j] === search) return i;
        }
    }
}

console.log(filterItems("two")); // logs 0 (returns 0) 
console.log(filterItems("four")); // logs 1 (returns 1)

Essentially the first loop is used to loop through your contacts array. And then the second is used to loop through the array in the el property. Then upon each iteration of the el array, we can check if the array element we are currently on equals the passed through search value, thus returning true if it matches

Working example: https://jsfiddle.net/knLbL9b5/ (Check console for outputs)

Collectives™ on Stack Overflow

How to filter an array of objects with array as one of the object parameters?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related