How to filter json data with dropdown in Angular 6?

Question

I have a table that lists data extracted from a json file. I want to filtering the data with dropdown. For example, i would like to list houses with prices between 0-1000 or home location is ' Çekmeköy ' .

I added dropdown and i gave the ng-model="search" property. Then i tried the filter options in *ngFor="let ihome of homes | filter: search" ( i also tried ng-repeat ) but it didn't work.

So, How to filter data with dropdown ? Any suggestion ?

Json Data :

 {
        "home_id":1,
        "home_imgUrl":"https://cdn.evtiko.com/images/houses/4/thumbnail/4_1513963370_1eda5d1aa440483bb8c468002c9bc50c.jpg",
        "home_location":"Çekmeköy, İstanbul",   
        "home_name": "Rönesans Sayfiye Sitesi",
        "home_numberOfRoom":"2+1",
        "home_size":"162m2",
        "home_floor":"1",
        "home_price":"476.000 ₺"
    },
    {
        "home_id":2,
        "home_imgUrl":"https://cdn.evtiko.com/images/houses/46/thumbnail/46_1526625393_93094fadc76a45628621d2c1d579eda4.jpg",
        "home_location":"Kadıköy, İstanbul",   
        "home_name": "Rönesans Sayfiye Sitesi",
        "home_numberOfRoom":"2+1",
        "home_size":"162m2",
        "home_floor":"1",
        "home_price":"375.000 ₺"
    },
    {
        "home_id":3,
        "home_imgUrl":"https://cdn.evtiko.com/images/houses/8/thumbnail/8_1513963370_f72f2854b9404cc7befc7b4e6f3832d5.jpg",
        "home_location":"Ümraniye, İstanbul",   
        "home_name": "Rönesans Sayfiye Sitesi",
        "home_numberOfRoom":"2+1",
        "home_size":"162m2",
        "home_floor":"1",
        "home_price":"576.000 ₺"
    },
    {
        "home_id":4,
        "home_imgUrl":"https://cdn.evtiko.com/images/houses/9/thumbnail/9_1513963370_d58d51026b9b446caec4792c6e720ead.jpg",
        "home_location":"Çekmeköy, İstanbul",   
        "home_name": "Rönesans Sayfiye Sitesi",
        "home_numberOfRoom":"2+1",
        "home_size":"162m2",
        "home_floor":"1",
        "home_price":"276.000 ₺"
    }

HTML Side

<div  class="row">
 <div *ngFor="let ihome of homes" class="col-md-4">
   <div class="card mb-4 box-shadow">
      <img class="card-img-top" data-src="{{ihome.home_imgUrl}}"  style="height: 480; width: 720; display: block;">
   <div class="card-body">
      <p class="card-text homeLocation">{{ihome.home_location}}</p>
      <p class="card-text homeName">{{ihome.home_name}}</p>
      <P class="card-tex price">{{ihome.home_price}}</P>
    <div class="d-flex justify-content-between align-items-center labelBorder">
      <div class="labelModify">
        <img src="https://cdn.evtiko.com/images/oda-sayisi.svg"> <span class="labelModify">{{ihome.home_numberOfRoom}}</span>
        <img src="https://cdn.evtiko.com/images/metrekare.svg"> <span class="labelModify">{{ihome.home_size}}</span>
        <img src="https://cdn.evtiko.com/images/kat-sayisi.svg"> <span class="labelModify">{{ihome.home_floor}}</span>
      </div>
    </div> 
  </div>
</div>

The best solution is NOT use pipe. just have two variables "homes" and "filteredHomes", Any change, change "filteredHomes" and iterate the *ngFor over "filteredHomes" — Eliseo
– Eliseo, Commented Jun 4, 2018 at 7:37

halfer · Accepted Answer · 2018-08-31 23:59:37Z

1

You can use a Angular custom pipe for this.

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

@Pipe({ name: 'yourPipeName' })
export class YourPipeName implements PipeTransform {
  transform(data: any[], max: number) {  // replace the any with your interface for data.
    return data.filter(home => (home.home_price > max)); change the condition as you need
  }
}

And the in the template where you have the dropdown

<input [(ngModel)]="max">  // bind the max carible for ngModel to get the max value(max price)

<div *ngFor="let ihome of homes | yourPipeName: max">
</div>

Comments

Sajeetharan · Accepted Answer · 2018-06-04 05:47:06Z

0

The syntax you showed ng-model and filter are angularjs syntaxes, you need to use [(ngModel)] with pipe to do the filtering with angular6.

answered Jun 4, 2018 at 5:47

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

Mevlüt Soner Over a year ago

i tried [(ngModel)]='searching' and "let ihome of homes | filter: searching" but didn't work. The error : The pipe 'filter' could not be found (" <select type="search" [(ngModel)]='searching'></select>

Sajeetharan Over a year ago

filter is also an angularjs syntax, you need to create custom pipe . look at the example stackblitz.com/edit/…

Sajeetharan Over a year ago

did the answer help?

Mevlüt Soner Over a year ago

i am new in angular. so i am trying to understand how to do.

Sajeetharan Over a year ago

look at the sample i provided

|

mittal bhatt · Accepted Answer · 2018-06-04 05:56:58Z

try using pipe like below 

Search by multiple fields

Assuming data:

items = [
  {
    id: 1,
    text: 'First item'
  },
  {
    id: 2,
    text: 'Second item'
  },
  {
    id: 3,
    text: 'Third item'
  }
];
Markup:

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>
Pipe:

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));}}

One line for everything!

Collectives™ on Stack Overflow

How to filter json data with dropdown in Angular 6?

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related