Angular 2 filtering data using pipes

Question

I have to filter a lot of information on a page coming from a database. I need to filter this by town/county, parking, county and it needs to have a custom search field.

The type of information coming in is this

[{
            "img-src": "../assets/img/admiralhouse.jpg",
            "name": "Admiral House",
            "town": "Fareham",
            "county":"Hampshire",
            "address": {
                "firstline":"Admiral House",
                "secondline":"43 High Street"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"[email protected]",
                "phone":"02392793000"
            }

        },
        {
            "img-src": "../assets/img/allendalehouse.jpg",
            "name": "Allendale House",
            "address": {
                "firstline":"Allendale House",
                "secondline":"Hanham Road",
                "town": "Wimborne",
                "county":"Dorset"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"[email protected]",
                "phone":"02392793000"
            }
        },
         {
            "img-src": "../assets/img/basepoint.jpg",
            "name": "Basepoint",
            "address": {
                "firstline":"Basepoint Business Centre",
                "secondline":"1 Winnall Valley Road",
                "town": "Winchester",
                "county":"Hampshire"
            },
            "parking":"Only on road",
            "contact":{
                "name":"Donna Robinson",
                "email":"[email protected]",
                "phone":"02392793000"
            }
        }
        ];

From this information I need to be able to filter through it so that i can bring back only certain information I have created a simple pipe that can ask if something is === to a string but how do I do this to multiple feilds and how do i get the information from the inputs into the pipe?

My page with the input types

import {Component} from 'angular2/core';
import {VenuesService} from './venues.service';
import {Pipe} from 'angular2/core';

@Pipe ({
    name:'search'
})
export class SearchPipe {
     transform(value) {
    return value.filter((item)=> item == ('bye'));
}
} 




@Component({
    selector: 'venues',
    template: `

    <h1> Venues </h1>

    <div id="filters">

        <p class="selecttitle">search:</p>
        <input type="text" placeholder="search venues">


        <h5 class="selecttitle"> Town/city: </h5>

        <select>
                <option value="All towns/cities">All towns/cities</option>

                <option value="Alton">Alton</option>
                <option value="Brockenhurst">Brockenhurst</option>
                <option value="Dorchester">Dorchester</option>
                <option value="Fareham">Fareham</option>
                <option value="Havant">Havant</option>
                <option value="Milton Keynes">Milton Keynes</option>
                <option value="Old Trafford">Old Trafford</option>
                <option value="Portsmouth">Portsmouth</option>
                <option value="Wimborne">Wimborne</option>
                <option value="Winchester">Winchester</option>



        </select>

        <h5 class="selecttitle"> County: </h5>

        <select>
                <option value="All Counties">All towns/cities</option>

                <option value="Buckinghamshire">Buckinghamshire</option>
                <option value="Doreset">Doreset</option>
                <option value="Greater Manchester">Greater Manchester</option>
                <option value="Hampshire">Hampshire</option>


        </select>

        <h5 class="selecttitle"> Car parking availability: </h5>

        <select>
                <option value="any">Any</option>
                <option value="Onsite car park">Onsite car park</option>
                <option value="Only on road">Only on road</option>
                <option value="none">none</option>



        </select>



    </div>

    <div id="venues">

     <ul>
        <li *ngFor="#venue of venues"> {{ venue.name }}
        </li>
     </ul>

    </div>






`,
providers:[VenuesService],
pipes:[SearchPipe],


})

Sorry this is a huge chunk of code but i wanted you to have any information you need. so pretty much how do I do proper filtering in Angular 2.

Thierry Templier · Accepted Answer · 2016-04-20 09:52:18Z

1

In you pipe, we will receive the array as parameter in you case (the first one) and you can filter this array the way you do:

@Pipe ({
  name:'search'
})
export class SearchPipe {
  transform(value) {
    return value.filter((item)=> {
      // for example
      return item.name === 'something'
         && item.address.county === 'something else';
    });
  }
}

If you want to leverage form from form to filter, you can leverage the second parameter of the transform method:

@Pipe ({
  name:'search'
})
export class SearchPipe {
  transform(value, params) {
    var input1Val = params[0];
    var input2Val = params[1];

    return value.filter((item)=> {
      // for example
      return item.name === input1Val
         && item.address.county === input2Val;
    });
  }
}

You can provide these parameters this way:

<div *ngFor="#venue of venues | search:input1:input2">(...)</div>

answered Apr 20, 2016 at 9:52

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

5 Comments

Adear Over a year ago

i cant seem to get this to work, it doesnt seem to return anything... im not sure if its because im implementing it wrong do you have any examples in plunker or anything?

Thierry Templier Over a year ago

Do you define your pipe in the pipes attribute of the directive you want to use it: @Component({ (...), pipes: [ SearchPipe ]}) ...?

Adear Over a year ago

nope I wasn't implementing it right, you where tottaly correct, again thank you so much! i was trying it out without adding '' around the parameter >.< do you know how i add the input as the parameter? do I just use a # local variable or is there anything to do with ng-form I can use?

Thierry Templier Over a year ago

You're welcome! You could leverage ngModel: <input [(ngModel)]="input1"/>. The problem is local variables defined with # is that they correspond to the DOM element or components / directives not the value... But this could work with controls: <input #ctrl="ngForm" ngControl="input1"/>. They would be able to use this: <div *ngFor="#venue of venues | search:ctrl.value">...

Thierry Templier Over a year ago

You could have a look at this article for more details: restlet.com/blog/2016/02/11/….

Collectives™ on Stack Overflow

Angular 2 filtering data using pipes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related