Angular 2 filtering data using pipes

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":"donna.robinson@monkies.org.uk",
                "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":"donna.robinson@monkies.org.uk",
                "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":"donna.robinson@monkies.org.uk",
                "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.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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… Read more »