Angular - search data based on selected item

Question

I am trying to search data depending upon selected item, as of now global search is working for all items. suppose if i select mobile item and then type iphone 11 in search then search should be done only on mobile array list. Can anyone please help and tell me How to search data on basis of selected option (category).

HTML

<div class="container">
  <div class="mt-4">
    <div class="form-group has-search">
      <span class="fa fa-search form-control-feedback"></span>
      <input type="text" class="form-control" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here">
    </div>
  </div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs mt-3" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#list" (click)="getAllData()">All</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Mobile')">Mobile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Laptop')">Laptop</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="col p-0">
      <h5 class="mt-2">Total Results - {{this.CoffeeItemList.length}} Products</h5>
    </div>
    <div id="menu1" class="tab-pane container active in">
      <div class="row">
      <div class="card col-3" *ngFor="let items of CoffeeItemList">
        <div class="card-body">
          <h5 class="card-title">{{items?.title }}</h5>
          <div class="img-box">

            <img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100" onerror="this.src='https://thestonecafe.com/saved/noImageAvailable.gif';"  alt="..." />
          </div>
          <p class="card-text">{{items?.content}}</p>
          <h4 class="card-text item-prics">${{items?.price}}</h4>
          <h5 class="card-text item-type"> {{items?.type | slice:15}}</h5>
        </div>
      </div>
    </div>
    </div>
    <div *ngIf="! CoffeeItemList?.length" class="mt-5 text-center">
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRMp-5DU0H4U_joMB6heA3nMMcUZe8EjqMqb0nVRql4CbTWSi6V"/>
 </div>
  </div>
</div>

TS

searchKeywords: string;
  coffeeResults: any;
  CoffeeItemList: any = [];

  // tslint:disable-next-line:max-line-length
  constructor(private getDataListingService: DataListingService) {}

  ngOnInit(): void {
    this.getGlobalSearchList('');
    this.getAllData();
  }
  getAllData() {
    this.getDataListingService.getAllDataLists().subscribe(value => {
      this.CoffeeItemList = value.data;
    });
  }
  getGlobalSearchList(type: string) {
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {
      let data = [];
      data = value.data;
      console.log(data);
      for (let i = 0; i < data.length - 1; i++) {
        if (data[i].type === type) {
            this.CoffeeItemList.push(data[i]);
        }
    }
    });
  }
  getSmartSearchValues(search: string) {
    if (search === '' ) {
      this.getGlobalSearchList('');
      return false;
    }
    this.getDataListingService.searchList(search).subscribe(value => {
      this.CoffeeItemList = value.data;
    });

  }
}

This service code is for searching data smart-search.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { SmartSearchList } from '../shared/models/smartSearchList';

@Injectable({
  providedIn: 'root'
})
export class SmartSearchService {

  baseUrl = 'apiurlhere';

  constructor(private http: HttpClient) { }

  getAllSmartSearchDataLists(): Observable<SmartSearchList> {
    return this.http.get<SmartSearchList>(this.baseUrl);
  }
}

Displaying list of product data-listing.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { DataLists  } from '../shared/models/dataListing';


@Injectable({
  providedIn: 'root'
})
export class DataListingService {
  baseUrl = 'http://infogainpune.com/api/products';

  constructor(private http: HttpClient) { }

  getAllDataLists(): Observable<DataLists> {
    return this.http.get<DataLists>(this.baseUrl);
  }

  searchList(search: string): Observable<DataLists> {
    return this.http.get<DataLists>('search url here' + search);
  }
}

JSON Response

JSON Product response attributes

Answer 1

Try this, Take one variable to store selected type value.

TS

selectedType: string = '';

getGlobalSearchList(type: string) {

    this.selectedType = type;
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {

        let data = [];
        data = value.data;
        console.log(data);
        for (let i = 0; i < data.length - 1; i++) {
            if (data[i].type === type) {
                this.CoffeeItemList.push(data[i]);
            }
        }
    });
}

getSmartSearchValues(search: string) {
    if (search === '' ) {
        this.getGlobalSearchList('');
        return false;
    }
    this.getDataListingService.searchList(search).subscribe(value => {

        let data = [];
        data = value.data;
        this.CoffeeItemList = value.data;

        // check selected type either coffee, mobile or ALL.
        if(this.selectedType && this.selectedType != '') {
            this.CoffeeItemList = [];
            for (let i = 0; i < data.length - 1; i++) {
                if (data[i].type === this.selectedType) {
                    this.CoffeeItemList.push(data[i]);
                }
            }
        }
    });
}