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

You are currently doing a service call for searching. Can you share the service code? — Rounak Snehasis
– Rounak Snehasis, Commented Feb 17, 2020 at 13:05
@RounakSnehasis - i have added service code. please have a look. — Pratiksha Kale
– Pratiksha Kale, Commented Feb 18, 2020 at 4:34
How you are map each item with category like iphone 11 with mobile in json data? Is there any property in data like category? — hrdkisback
– hrdkisback, Commented Feb 18, 2020 at 6:32

hrdkisback · Accepted Answer · 2020-02-18 07:08:20Z

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]);
                }
            }
        }
    });
}

answered Feb 18, 2020 at 7:08

hrdkisback

9088 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pratiksha Kale Over a year ago

@hrdkisback- sorry it is not working for specific category

Pratiksha Kale Over a year ago

Hey it is working now i have just removed length-1 from for loop

hrdkisback Over a year ago

Oke glad to hear that, You can refactor the duplicate code in both methods.

Collectives™ on Stack Overflow

Angular - search data based on selected item

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related