angular pipe to filter text with multi level key

1
votes

I have an angular pipe which just filter outs the text from ngFor. It works very well with single level of json object but fails when there is multi level object.

Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({   name: 'simpleSearch' })
  export class SimpleSearchPipe implements PipeTransform {

  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || [])
        .filter(item => 
             keys.split(',').some(key => {
                item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])
             })
        );
   }
}

template:

<div *ngFor="let issue of issuesData
      | simpleSearch: 'key,fields.summary,fields.priority.name': searchTerm"
></div>

Here the search works very well for the field "key" (1st level of json object) but doesn't works for other keys.

Can anyone please help me fix this or please let me know if you need some more info.

2
javascriptangularangular-pipe

2 Answers

2
votes

try to use lodash's get() function:

import { Pipe, PipeTransform } from '@angular/core';

import * as lodash from 'lodash';

@Pipe({ name: 'simpleSearch' })
export class SimpleSearchPipe implements PipeTransform {

  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || [])
      .filter(item =>
        keys.split(',').some(key => {
          const val = lodash.get(item, key, undefined);
          return val !== undefined && new RegExp(term, 'gi').test(val);
        })
      );
  }
}

also, in your some() function you need to return boolean by providing return statement or by removing curly brackets. I added return in your code.

STACKBLITZ

2
votes

Extract the nested object values based on this:

var myObj = {
    key: 'myKcley',
    fields: {
        summary: 'asdf'
    }
};

var getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

var objKeys = 'key, fields.summary';
objKeys.split(',').forEach(key => {
    if(key.includes('.')) {
        var keyArray = key.trim().split('.');

        var value = getNestedObject(myObj, keyArray);
        console.log(value);

    }
});