Angular: Filter Service via API request

Question

I am using a filter and need to read the value in order to send an API request with the values in the url. I use this API. I am able to filter both of the categories. After selecting two, we wanna send an API request with both selected values in the url.

We generated a backend-side script to filter, all I need to do is sending a request with the modified url.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  lines: any[];
  filteredLines: any[];
  filterBy;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get("https://api.mocki.io/v1/26fce6b9").subscribe(lines => {
      this.lines = lines;
      this.filteredLines = [...this.lines];
    });
  }

  filter() {
    this.filteredLines = [
      ...this.lines.filter(dropdown => dropdown.name.includes(this.filterBy))
    ];
  }


    /** Here I need a script onClick button that reads the selected values and sending a get-request of API link above added with the filtered values: 

                 With click on the submit-button, I want to send the API request.
If api.com/data is the link, the request link would be like api.com/data?line=A&workCenter=1

The "?" is for category Line, and "&" for workCenter.
**/

 
  }
}

app.component.html

<select>
      <option>Line</option>
      <option *ngFor="let dropdown of filteredLines" (keyup)="filter()">
        {{dropdown.line}}
      </option>
</select>
<select>
      <option>Work Center</option>
      <option *ngFor="let dropdown of filteredLines" (keyup)="filter()">
        {{dropdown.workCenter}}
      </option>
</select>
  <form action="" method="post">
    <input type="submit" name="request" value="Submit" />
</form>

I have created a Stackblitz project for better understanding.

score 0 · Answer 1 · answered Jan 28 '21 at 12:21

It is not clear for me if you want to send multiple { line, workCenter } objects to the API call, but from how you setted up the Stackblitz project I will assume you want to send just a single one.

Never seen a (keyup) on an <option> element, use [(ngModel)] on the <select> instead:

<select [(ngModel)]="selected.line">
      <option [value]="null">Line</option>
      <option *ngFor="let dropdown of filteredLines" [value]="dropdown.line">
        {{dropdown.line}}
      </option>
</select>
<select [(ngModel)]="selected.workCenter">
      <option [value]="null">Work Center</option>
      <option *ngFor="let dropdown of filteredLines" [value]="dropdown.workCenter">
        {{dropdown.workCenter}}
      </option>
</select>
<!-- the use of the form in this case is not required       -->
<!-- since you are using requestAnDieAPI to do the api call -->
<form action="" method="post" (submit)="requestAnDieAPI()">
    <input type="submit" name="request" value="Submit" />
</form>
<!-- You can also use just a simple button -->
<button (click)="requestAnDieAPI()">Submit</button>

Then your component (model) should contain a selected variable that map the interface (view)

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  lines: any[];
  filteredLines: any[];
  filterBy;
  selected = {
    line: null,
    workCenter: null
  };

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get("https://api.mocki.io/v1/26fce6b9").subscribe((lines: any[]) => {
      this.lines = lines;
      // this.filteredLines = [...this.lines];
      // better:
      this.filteredLines = this.lines.slice();
      // or either this.filter() directly
    });
  }

  filter() {
    // this.filteredLines = [
    //  ...this.lines.filter(dropdown => dropdown.name.includes(this.filterBy))
    // ];
    // this is redundant, better:
    this.filteredLines = this.lines.filter(dropdown => dropdown.name.includes(this.filterBy))
  }

  requestAnDieAPI() {
    if (this.selected.line != null && this.selected.workCenter != null) {
      let apiUrl = "https://api.com/data?line=" + this.selected.line + 
                     "&workCenter=" + this.selected.workCenter
      this.http.get(apiUrl).subscribe(/* Your optional response callback/subscriber here */);
    }
  }
}

score 0 · Accepted Answer · answered Jan 28 '21 at 12:25

From your example, you need to add [(ngModel)] which will bind to the selected value. You can find more info on how to properly use a select here More info

   <select [(ngModel)]="selectedLine">
  <option>Line</option>
  <option *ngFor="let dropdown of filteredLines" (keyup)="filter()">
    {{dropdown.line}}
  </option>
</select>
<select [(ngModel)]="selectedWorkCenter">
  <option>Work Center</option>
  <option *ngFor="let dropdown of filteredLines" (keyup)="filter()">
    {{dropdown.workCenter}}
  </option>
</select>
<form action="" method="post">
  <input type="submit" name="request" value="Submit" (click)="Submit()" />
</form>

Then in your ts file, declare the select variable and access value as in the click function Submit.

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  lines: any[];
  filteredLines: any[];
  filterBy;
  selectedLine; // For first select
  selectedWorkCenter; // For second select

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get("https://api.mocki.io/v1/26fce6b9").subscribe(lines => {
      this.lines = lines;
      this.filteredLines = [...this.lines];
    });
  }

  filter() {
    this.filteredLines = [
      ...this.lines.filter(dropdown => dropdown.name.includes(this.filterBy))
    ];
  }

  requestAnDieAPI() {
    console.log(this.filteredLines); // hier muss mein API post request hin
  }

  Submit() {
    var baseUrl = `https://api.mocki.io/`;
    var url = `${baseUrl}data?line=${this.selectedLine}&workCenter=${
      this.selectedWorkCenter
    }`;
    this.http.get(url).subscribe(response => {
      // response
    });
  }
}

Angular: Filter Service via API request

2 Answers2