Typescript array object filter

Question

I'm trying to filter a array object in angular 5, this is my object

{
    "id_record": 2,
    "groupName": "PD",
    "count": 15,
    "userList": [{
            "name": "jeffhua",
            "nEmail": "jeffhua@abc.com"
        },
        {
            "name": "joey",
            "nEmail": "joey@abc.com"
        },
        {
            "name": "angelagosto",
            "nEmail": "angelagosto@abc.com"
        }
    ]
}

and here is my filter code

return items.filter(it => {
  return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText)
  });
});

What could be wrong?

Answer 1

In your filter code, the second filter returns an array :

return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText)
  });
// returns array

and the filter method awaits a boolean to be returned. Try the following :

return items.filter(it => {
  return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
  }).length !== 0;
});

In my code snippet, I check if the inner filter result (an array) is empty or not. If not, you return true to the parent filter, which will keep the current object in the resulting array.

---

Breakdown (edit)

The following returns a boolean, checking if the name in lowercase of one of your user contains filterText.

return dit.name.toLowerCase().includes(filterText);

Then, this block returns an array containing all the values that returned true in the condition explained before :

return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
})

But, for the parent part of the code snippet to filter the array, it needs a boolean as return value :

return items.filter(it => {
  return // expect boolean
});

Then, the .length !== 0 at the end of :

it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
})

makes it a boolean which should be reflecting the condition you're wanting.

In full (and commented) :

// filter returns an array filtered by the method
return items.filter(it => {
  // awaits a boolean return value, with filter returning an array.
  return it.userList.filter(dit => {
    // filter awaits a boolean as return value AND returns a boolean --> ok for filter
    return dit.name.toLowerCase().includes(filterText);
  }).length !== 0; // filter has returned an array, we cast it to boolean while checking if its length is greater than 0.
});

Answer 2

Use some instead of inner filter

  return items.filter(it => {
      return it.userList.some(dit => {
        return dit.name.toLowerCase().includes(filterText)
      });
    });