CODEWITHSUNDEEP
javascripthtmlangulartypescriptionic-framework
Vista
Vista

Reputation: 201

ion-select filter choices applied from json data

I'm new in Ionic and I'm planning to use ion-select to filter/select order status.

My ion-select looks like this

enter image description here

As you can see I want it only to show 'Order Processed' which it doesn't.

enter image description here

How can I apply the JSON Data to my ion-select choices?

Here is my page.ts

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }

 //comment this if you gonna use api url
 private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = 'assets/data/data.json';
  // Prepare the request
  return this.http.get(dataUrl);
}

orders= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe( //comment this if you will use Api Url
  //this.dataService.getRemoteData().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.orders = data.output.Result.OrderTracker;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

Here is my html

<ion-list>
    <ion-item>
      <ion-label>Status</ion-label>
      <ion-select lines="full" multiple="true" cancelText="Cancel" okText="Okay" >
        <ion-select-option value="processed">Order Processed</ion-select-option>
        <ion-select-option value="received">Order Received</ion-select-option>
        <ion-select-option value="pending">Order Pending</ion-select-option>
        <ion-select-option value="cancelled">Order Cancelled</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
  <ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders; let i=index;">
      {{ order?.ordernumber || '-' }} - {{order?.status || '' }} - {{order?.date || '' }} - {{order?.time || '' }}
      <ion-button ion-button (click)="hide(i)">UPDATE</ion-button>
      <ion-card *ngIf="currentDisplayIndex==i">
        <ion-card-header>
          <ion-card-title>UPDATE {{ order?.ordernumber || '-' }} </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-input type="text" placeholder="Enter Status"></ion-input>
          <ion-input type="date" placeholder="Enter Date"></ion-input>
          <ion-button>Submit</ion-button>
        </ion-card-content>
      </ion-card>
    </p>
  </ng-container>

Upvotes: 2

Views: 1052

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17504

You need to capture the selected data using (ionChange) and apply it to the orders as below

HTML

<ion-select lines="full" multiple="true" cancelText="Cancel" okText="Okay"
    [(ngModel)]="ordersSelected" (ionChange)='orderTypeSelected()' >
        <ion-select-option value="processed">Order Processed</ion-select-option>
        <ion-select-option value="received">Order Received</ion-select-option>
        <ion-select-option value="pending">Order Pending</ion-select-option>
        <ion-select-option value="cancelled">Order Cancelled</ion-select-option>
</ion-select>

in component.ts


orders= [];
actualOrders = [];
ordersSelected = [];

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }

 //comment this if you gonna use api url
 private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = 'assets/data/data.json';
  // Prepare the request
  return this.http.get(dataUrl);
}

ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe( 
    data => {
      // Takes data into in single Array and print 
      this.actualOrders = data.output.Result.OrderTracker;
      this.orders = data.output.Result.OrderTracker;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

public orderTypeSelected(){
   if (this.ordersSelected.length < 1){
      this.orders = JSON.parse(JSON.stringify(this.actualOrders))
   }else{
      this.orders = this.actualOrders.filter(d => this.ordersSelected.find(option => d.status === option );
  }
}

Upvotes: 2

Related Questions