0

I want to filter multiple variable (tag1, tag2 and tag3) of JSON objects (source) using checkbox.

The JSON is like followed : 

 {
      "hits": [
        {
          "id": "40rVznABk98ZNay",
          "rank": 1,
          "score": 11,
          "source": {
            "article_lang_inv": "NULL",
            "date_collect": "2020-01-22T00:00:00",
            "doc_id": 8030829966141082359,
            "doc_name": "Article L34",
            "doc_type": "article",
            "lang": "fr",
            "tag1": "a",
            "tag2": "d",
            "tag3": "g"
          }
        }
      ],
      "summary": {
        "elastic_index": "test_custom_analyzer",
        "limit_asked": 10,
        "query_string": "texte",
        "successful": 5,
        "total_hits_returned": 4748
      }
    }

I've use the answer of Daniel Gimenez to build my filter but I got some issues on tag2 and tag3. tag1 works fine but for tag2 for example, there is just the 'f' that works.

MyComponent.ts

export class MyComponent {
      texte: string;
      rpsS: any = [];
      rpsSummary: any = [];
        filteredTag: any = [];
          filterTag1 = {a: true, b: true, c: true};
          tag1 = ['a', 'b', 'c'];
          filterTag2 = {d: true, e: true, f: true};
          tag2 = ['d', 'e', 'f'];
          filterTag3 = {g: true, h: true, i: true};
          tag3 = ['g', 'h', 'i'];

        filterByTag() {
            if (!this.filterTag1.a && !this.filterTag1.b && !this.filterTag1.c && !this.filterTag2.d && !this.filterTag2.e && !this.filterTag2.f && !this.filterTag3.g && !this.filterTag3.h && !this.filterTag3.i 
              ) {
              this.filteredTag = this.rpsS;
              return;
            }
            this.filteredTag = this.rpsS.filter( x =>
              (
                (this.filterTag1.a && (x.source.tag1 === 'a')) ||
                (this.filterTag1.b && (x.source.tag1 === 'b')) ||
                (this.filterTag1.c && (x.source.tag1 === 'c')) &&
                ((this.filterTag2.d && (x.source.tag2 === 'd')) ||
                (this.filterTag2.e && (x.source.tag2 === 'e')) ||
                (this.filterTag2.f && (x.source.tag2 === 'f'))) &&
                ((this.filterTag3.g && (x.source.tag3 === 'g')) ||
                (this.filterTag3.h && (x.source.tag3 === 'h')) ||
                (this.filterTag3.i && (x.source.tag3 === 'i'))))
              );
          }

     search() {
        this.httpClientService.getDocument(this.texte).subscribe(
          (data: any) => {
            this.rpsS = this.filteredTag = data.hits;
            this.rpsSummary = data.summary;
          },
          errorCode => console.log(errorCode)
        );
      }
}

MyComponent.html

    <label>
        <input [(ngModel)]="filterTag1.a" (ngModelChange)="filterByTag()" 
          name="a"
          type="checkbox" 
          class="radio" 
          id="rb-1" checked/> a </label> 
<!-- ... --->
      <label>
        <input [(ngModel)]="filterTag2.d" (ngModelChange)="filterByTag()"
        name="d"
        type="checkbox" 
        class="radio" 
        id="rb-2" checked/> d </label>
<!-- ... --->
      <label>
        <input [(ngModel)]="filterTag3.g" (ngModelChange)="filterByTag()"
        name="g"
        type="checkbox" 
        class="radio" 
        id="rb-3" checked/> g </label>
<!-- ... --->
 <div class="container" id="resultSearch">
         <div *ngFor="let rps of filteredTag" class="alert alert-primary" role="alert">
             <span class="tag1"> {{rps?.source.tag1}} </span> 
             <span class="tag2"> {{rps?.source.tag2}} </span>
             <span class="tag3"> {{rps?.source.tag3}} </span>        
         </div>
  </div>

Any help would be appreciated !

Tony27
  • 1
  • 1

1 Answers1

0

Found the solution of my issue.

Thanks to Just code answer.

MyComponent.ts

  export class MyComponent {
          texte: string;
          rpsS: any = [];
          rpsSummary: any = [];
          filteredTag1: any = [];
          filteredTag2: any = [];
          filteredTag3: any = [];
          filteredData: any = [];
              filterTag1 = {a: true, b: true, c: true};
              tag1 = ['a', 'b', 'c'];
              filterTag2 = {d: true, e: true, f: true};
              tag2 = ['d', 'e', 'f'];
              filterTag3 = {g: true, h: true, i: true};
              tag3 = ['g', 'h', 'i'];

   filterByTag1() {
    if (!this.filterTag1.a && !this.filterTag1.b && !this.filterTag1.c) {
      this.filteredTag1 = this.filteredTag1;
      return;
    } else {
      this.filteredTag1 = this.filteredTag1.filter( x =>
      (
        (this.filterTag1.a && (x.source.tag1 === 'a')) ||
        (this.filterTag1.b && (x.source.tag1 === 'b')) ||
        (this.filterTag1.c && (x.source.tag1 === 'c'))
      ));
    }
    this.applyFilters();
  }
      // same for filterByTag2() and filterByTag3()  

   applyFilters() {
    this.filteredData = this.rpsS.filter(x => {
      return ( 
       (this.filterTag1.a && (x.source.tag1 === 'a')) ||
       (this.filterTag1.b && (x.source.tag1 === 'b')) ||
       (this.filterTag1.c && (x.source.tag1 === 'c')) &&
       ((this.filterTag2.d && (x.source.tag2 === 'd')) ||
       (this.filterTag2.e && (x.source.tag2 === 'e')) ||
       (this.filterTag2.f && (x.source.tag2 === 'f'))) &&
       ((this.filterTag3.g && (x.source.tag3 === 'g')) ||
       (this.filterTag3.h && (x.source.tag3 === 'h')) ||
       (this.filterTag3.i && (x.source.tag3 === 'i')));
    });
  }  
         search() {
            this.httpClientService.getDocument(this.texte).subscribe(
              (data: any) => {
                this.rpsS = this.filteredData = data.hits;
                this.rpsSummary = data.summary;
              },
              errorCode => console.log(errorCode)
            );
          }
    }

MyComponent.html

  <label>
        <input [(ngModel)]="filterTag1.a" (ngModelChange)="applyFilters()" 
          name="a"
          type="checkbox" 
          class="radio" 
          id="rb-1" checked/> a </label> 
<!-- ... --->
Tony27
  • 1
  • 1