how to filter json data using angular2

Question

json data

 [{"masterbatch":"29",
   "batch": [{"subgroupname":"Batch 1"},{"subgroupname":"Batch 10"},{"subgroupname":"Batch 11"},{"subgroupname":"Batch 12"},{"subgroupname":"Batch 13"},{"subgroupname":"Batch 14"},{"subgroupname":"Batch 15"},{"subgroupname":"Batch 16"},{"subgroupname":"Batch 17"},{"subgroupname":"Batch 2"},{"subgroupname":"Batch 3"},{"subgroupname":"Batch 4"},{"subgroupname":"Batch 5"},{"subgroupname":"Batch 6"},{"subgroupname":"Batch 7"},{"subgroupname":"Batch 8"},{"subgroupname":"Batch 9"}],

   "group":[{"groupname":"Group I"},{"groupname":"Group II"},{"groupname":"Group III"},{"groupname":"Group IV"},{"groupname":"Group IX"},{"groupname":"Group V"},{"groupname":"Group VI"},{"groupname":"Group VII"},{"groupname":"Group VIII"}],

   "section":[{"Sections":"Section I"},{"Sections":"Section II"},{"Sections":"Section III"},{"Sections":"Section IV"}]

  }];

html

      Select Type :
        <select [(ngModel)]="sel_type"  style="width:100px;">
            <option value='Select Type'>Select Type</option>
            <option>section</option>
            <option>group</option>
            <option>batch</option>
       </select>
      <select  [(ngModel)]="sel_subtype"  style="width:100px;"></select>

if I select sel_type equal to batch then pass data to next select box sel_subtype only batch from json object

same for group and section

how to do it using angular2?

Answer 1

You can create one function in component from which you can set sub types :

// Component

public batches : any = [
  {
    "masterbatch":"29",
    "batch": [
      {"subgroupname":"Batch 1"},{"subgroupname":"Batch 10"},{"subgroupname":"Batch 11"},{"subgroupname":"Batch 12"},{"subgroupname":"Batch 13"},{"subgroupname":"Batch 14"},{"subgroupname":"Batch 15"},{"subgroupname":"Batch 16"},{"subgroupname":"Batch 17"},{"subgroupname":"Batch 2"},{"subgroupname":"Batch 3"},{"subgroupname":"Batch 4"},{"subgroupname":"Batch 5"},{"subgroupname":"Batch 6"},{"subgroupname":"Batch 7"},{"subgroupname":"Batch 8"},{"subgroupname":"Batch 9"}
    ],

    "group":[
      {"groupname":"Group I"},{"groupname":"Group II"},{"groupname":"Group III"},{"groupname":"Group IV"},{"groupname":"Group IX"},{"groupname":"Group V"},{"groupname":"Group VI"},{"groupname":"Group VII"},{"groupname":"Group VIII"}
    ],

    "section":[
      {"Sections":"Section I"},{"Sections":"Section II"},{"Sections":"Section III"},{"Sections":"Section IV"}
    ]    
  }
];
public subTypes: any[] = [];

public function onChange(type:string){
    this.subTypes = this.batches[0][type].length ? this.batches[0][type] : [];
}

// HTML

Select Type :
<select [(ngModel)]="sel_type"  style="width:100px;" (change)="onChange(sel_type);">
  <option value='Select Type'>Select Type</option>
  <option value="section">section</option>
  <option value="group">group</option>
  <option value="batch">batch</option>
</select>
<select [(ngModel)]="sel_subtype"  style="width:100px;">
  <option value='Select Type'>Select Sub Type</option>
  <option [value]="type.groupname" *ngFor="let type of subTypes">{{type.groupname}}</option>
</select>

Answer 2

You can easily add a pipe for such use case and use it may be some like this can be useful for your case . You can try it with with selct dropdown as well it works with ul and li .

import {Injectable, Pipe} from 'angular2/core';

@Pipe({
name: 'myfilter'
})

  @Injectable()
  export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
    return items.filter(item => item.id.indexOf(args[0]) !== -1);
}

}

  And use it:

 import { MyFilterPipe } from './filter-pipe';
    (...)

    @Component({
    selector: 'my-component',
    pipes: [ MyFilterPipe ],
    template: ` <ul>
       <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
   </ul>       `
 })

Another approach might be to add event on the select list and filter the data of other component in typescript component use it in typescript filter function .