Angular 4 Forms --> Search Results from Input

Question

So I am having a bit of a problem. I have to create a search page for a travel agency. In this example, I'm booking a flight. I have no idea how to display each result based off the inputs of the form ahhhhh. I've been trying but I ran outta mental energy for the day smh.

Here is some code:

HTML

<!-- Search Form -->
<form class="" action="index.html" method="post">

  <h1> Let's Go. </h1>
  <hr>

  <select class="" name="">
    <option value="">Select means of Travel</option>
    <option value="">Flight</option>
  </select>

  <label for="Travel Start Date">Travel Start Date</label>
  <input type="date" name="" value="Travel Start Date">

  <label for="Travel End Date">Travel End Date</label>
  <input type="date" name="" value="Travel End Date">

  <select class="" name="">
    <option value="">Departure Location</option>
    <option value="Atlanta">Atlanta</option>
  </select>

  <select class="" name="">
    <option value="">Arrival Location</option>
    <option value="San Francisco">San Francisco</option>
  </select>

  <select class="" name="">
    <option value="">Product Class</option>
    <option value="">Economy</option>
  </select>

  <input style="width: 100px; background-color: green; color: #eef; height: 40px; border-radius: 50px; margin: 0 auto; margin-top: 50px;"
         type="submit" name="" value="Submit" onclick="">

</form>

<!-- Results -->

<div class="result">
  <ul>
    <li *ngFor = 'let group of displayItems'>
      <div class="flight-card">

        <div class="availability">
          <h5> Availability: {{group.availability}} </h5>
        </div>

        <div class="price">
          {{ group.price.symbol }}
          {{ group.price.amount }}
          <p>{{ group.price.currency }}</p>
        </div>

        <div class="arrival">
          <h5> Arrival City: </h5>{{group.arrival.city}} <br>
          <h5> Arrival Airport Name: </h5>{{group.arrival.airport.name}} <br>
          <h5> Arrival Time: </h5>{{group.arrival.city}} <br><br>
        </div>

        <hr>

        <div class="depature">
          <h5> Depature City: </h5>{{group.departure.city}} <br>
          <h5> Departure Airport Name: </h5>{{group.departure.airport.name}} <br>
          <h5> Departure Time: </h5>{{group.departure.time}} <br><br>
        </div>

      </div>
    </li>
  </ul>
</div>

(In root App) Component.Ts

    import { Component } from '@angular/core';
import { Http, Response, RequestMethod, RequestOptions, Headers } from '@angular/http';
import { NgIf } from '@angular/common';
import { Form } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  result;
  errorFromSubscribe;
  errorFromCatch;
  displayItems;



  // Inject HttpClient into your component or service.
 constructor(private http: Http) {}

 ngOnInit(): void {
   // Making the HTTP Request
   this.http
    // Get API data
    .get('https://api.myjson.com/bins/1gb9tf')
    // Subscribe
    .subscribe( (res: Response) => {
      // Parses the response to JSON.
      this.result = res.json();
      this.displayItems = this.result['results'];
      console.log(this.result);
    }, error => {
        console.log(error)
        this.errorFromSubscribe = error;
      });


 }

  title = 'app';
}

score 3 · Accepted Answer · answered Jan 07 '18 at 04:13

You need to use pipe for filtering by applying a specific logic to filter items for search

  <li *ngFor="let group of displayItems  | filter: term">

and the pipe as follows,

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
 transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){

        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }

       }
      return false;
    });
  }

}

DEMO

thank you very much. You provided the solution for me to figure it out for myself at the very least. Just having some trouble using this method or multiple inputs — Eddie Taliaferro II, Jan 08 '18 at 03:30

Angular 4 Forms --> Search Results from Input

1 Answers1