CODEWITHSUNDEEP
javascriptarraystypescript
Mac_W
Mac_W

Reputation: 2987

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

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?

Upvotes: 0

Views: 62

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50674

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)

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386550

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

Upvotes: 2

George
George

Reputation: 6739

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

Upvotes: 1

Related Questions