Filter the array of objects with optional values

user_12971574 0
Viewed 720

I have an array of object, were objects can have optional name value, or subject value.

Also a have filterString.

I have to write filter function, which ckecks if one of this values include this string.

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el =>
              el.subject
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) ||
              el.name
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
          );
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });

This is what i have now. I get error like Cannot read property "toLocaleLowerCase" of undefined, because my element have name OR subject, how i can avoid this ?

typescript reactjs javascript
3 Answers

You can try this.

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el => {
              const inSubject = el.subject ?
                el.subject.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              const inName = el.name ?
                el.name.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              return inSubject || inName;
          });
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });
user_75582380

I think adding validation to the items might work



    const filterString = e.target.value && e.target.value.toLowerCase();
    if ( filterString ) {
        const { itemsList } = this.state;
        const filteredItemsList = [...filteredItemsList.filter(
                el => {
                  const inSubject = el.subject &&
                    el.subject.toLocaleLowerCase()
                    .includes(filterString);

                  const inName = el.name &&
                    el.name.toLocaleLowerCase()
                    .includes(filterString));

                  return inSubject || inName;
              })];

       this.setState({
            itemsList: filteredItemsList,
            filter: filterString
       });
    }
user_45058840 
const filterString = e.target.value.toLowerCase();
if (filterString === '') return;
let filteredItemsList = this.state.itemsList.filter(
    el => [el.subject, el.name]
        .some(
            item => item && item
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
        )
);
this.setState({
    itemsList: filteredItemsList,
    filter: e.target.value.toLocaleLowerCase(),
});
user_123645580
Related