Angular 2 Search Pipe filter objects with array property

Question

I have Angular 2 Search Pipe that filters against an array of Project[]. It works for every property except for one containing an array of strings.

Here is a sample of data model

[{
    'Id': 2,
    'Title': 'Abc',        
    'Amount': '200',
    'Outcome': ['Outcome 2', 'Outcome 22', 'Outcome 222', 'Outcome 2222']
},
{
    'Id': 3,
    'Title': 'Abc',        
    'Amount': '300',
    'Outcome': ['Outcome 3', 'Outcome 333', 'Outcome 3333', 'Outcome 33333']
}]

Here is the SearchPipe -

not searching against Outcome array

export class SearchPipe implements PipeTransform {
transform(value, args?): Project[] {
    let searchText = new RegExp(args, 'ig');
    if (value) {
        return value.filter(project => {
            if (project) {
                return project.Title.search(searchText) !== -1
                    || project.Focus.search(searchText) !== -1
                    || project.Outcome.forEach(outcome => {
                        if (outcome.search(searchText) !== -1) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    });
            }
        });
    }
}

}

Any Help would be much appreciated - Thank you!

Nige · Accepted Answer · 2016-11-02 23:20:29Z

2

Your foreach is incorrect. It doesnt return true or false. You can change your pipe to something like this and search if it contains something in the string and then return a boolean accordingly.

Like so:

@Pipe({name: 'Search'})
export class Search implements PipeTransform {
  transform(value, args?) {
      let searchText = 'test';

      if (value) {
          return value.filter(project => {
              if (project) {
                  return  !project.Outcome.every(outcome => {
                              return (!outcome.includes(searchText))
                          });

              }
          });
      }
  }
}

Also check the plunker I used to see it working ( https://plnkr.co/edit/ntyDUEwe0HXwjeupqDUr?p=preview )

answered Nov 2, 2016 at 23:20

Nige

1,2332 gold badges10 silver badges21 bronze badges

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

Comments

Poul Kruijt · Accepted Answer · 2016-11-02 23:07:43Z

The problem lies within the forEach loop you do. Returning true or false doesn't do what you expect.

A solution would be to move this logic to a separate function:

export class SearchPipe implements PipeTransform {
   transform(value, args?): Project[] {
    let searchText = new RegExp(args, 'ig');
      if (value) {
        return value.filter(project => {
            if (project) {
                return project.Title.search(searchText) !== -1
                    || project.Focus.search(searchText) !== -1
                    || this._checkArray(project.Outcome, searchText);
            }
        });
    }
  }

  _checkArray(arr, search) : boolean {
      let found: boolean = false;
      arr.forEach(outcome => {
                        if (outcome.search(search) !== -1) {
                            return true;
                        }
                    })
      return found;
  }
}

It's untested, and not pretty yet. But you get the general idea

Collectives™ on Stack Overflow

Angular 2 Search Pipe filter objects with array property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related