1

I Have A json like this . which is server response.

[
{
    "itemId": 1062,
    "businessType": "SPORT",
    "name": "Modern Martial Arts Vitor Shaolin Brazilian Jiu Jitsu",
    "websiteUrl": "http://www.yelp.com/biz/modern-martial-arts-vitor-shaolin-brazilian-jiu-jitsu-new-york",
    "rating": 5,
    "city": "New York",
    "address": "780 8th Ave (b/t 47th St & 48th St) Hell's Kitchen New York NY 10036",
    "imageUrl": "http://s3-media3.ak.yelpcdn.com/bphoto/JHk9p_jYX1QpQN4Im-p3jA/ms.jpg",
    "source": "Yelp",
    "price" :"6 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 8227,
    "businessType": "SPORT",
    "name": "TGA of Bergen County",
    "websiteUrl": "http://www.golftga.com/Default.aspx?alias=www.golftga.com/bergencounty",
    "city": "Wayne",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "price" :"26 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3932,
    "businessType": "SPORT",
    "name": "Willowbrook Golf Center",
    "websiteUrl": "http://www.willowbrookgolfcenter.com",
    "city": "North Jersey",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "price" :"36 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3918,
    "businessType": "SPORT",
    "name": "Church Street Boxing Gym & Pouncing Tigers",
    "websiteUrl": "http://www.csboxinggym.com/",
    "city": "New York City",
    "address": "201207 West 42nd Street New York NY 10036 USA",
    "source": "Groupon",
    "price" :"106 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 1100,
    "businessType": "SPORT",
    "name": "CKO Kickboxing Carroll Gardens",
    "websiteUrl": "http://www.yelp.com/biz/cko-kickboxing-carroll-gardens-brooklyn-2",
    "rating": 4,
    "city": "Brooklyn",
    "address": "562 Court St (b/t Hamilton Ave & Garnet St) Carroll Gardens Brooklyn NY 11231",
    "imageUrl": "http://s3-media2.ak.yelpcdn.com/bphoto/guwuh08U_tYTyRsjLQIJ-w/ms.jpg",
    "source": "Yelp",
    "price" :"29$",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 462,
    "businessType": "SPORT",
    "name": "TITLE Boxing Club",
    "websiteUrl": "http://www.titleboxingclub.com",
    "city": "Wayne",
    "address": "Wayne NJ 07470 USA",
    "source": "Groupon",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 474,
    "businessType": "SPORT",
    "name": "Centercourt Athletic Club of Morristown",
    "websiteUrl": "http://www.centercourtclub.com/club/scripts/section/section.asp?CLNK=1&NS=CMT",
    "city": "Wayne",
    "address": "Wayne NJ 07470 USA",
    "source": "Groupon",
    "price":"1008 $",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 3326,
    "businessType": "SPORT",
    "name": "Legends Baseball Instruction",
    "websiteUrl": "http://www.legendsbaseballinstruction.com",
    "city": "North Jersey",
    "address": "17 North Jersey Lane Wayne NJ 07470 USA",
    "source": "Groupon",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Self",
    "suggestingUser": {
        "userId": 1,
        "firstName": "Gaurav",
        "lastName": "Shandilya",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
    }
},
{
    "itemId": 1104,
    "businessType": "SPORT",
    "name": "Adirondack Sailing",
    "websiteUrl": "http://www.yelp.com/biz/adirondack-sailing-new-york",
    "rating": 4,
    "city": "New York",
    "address": "62 Chelsea Piers New York NY 10011",
    "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/FwpUOlPWSpLlEteBGukcpg/ms.jpg",
    "source": "Yelp",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Friend",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    }
},
{
    "itemId": 1709,
    "businessType": "SPORT",
    "name": "Manhattan Sailing Club",
    "websiteUrl": "http://www.yelp.com/biz/manhattan-sailing-club-new-york",
    "rating": 4,
    "city": "New York",
    "address": "385 S End Ave Ste 6H Battery Park New York NY 10280",
    "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/9yvzeSYaKfguvDUzF69xvw/ms.jpg",
    "source": "Yelp",
    "itemType": "Business",
    "suggestionCriteria": "like",
    "suggestedBy": "Friend",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    }
},
{
    "eventId": 9743,
    "description": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
    "event_date": "2015-01-31 00:00:00.0",
    "venue_name": "Barclays Center Parking Lots",
    "city": "Brooklyn",
    "urlpath": "http://www.stubhub.com/parking-passes-only-igor-krutoi-gala-concert-brooklyn-barclays-center-parking-lots-31-1-2015-9004479",
    "totalTickets": "0.0",
    "title": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
    "ancestorGenreDescriptions": "[All tickets, Concert tickets, Artists H - K, Igor Krutoi Gala Tickets]",
    "itemType": "Event",
    "category": "Concert",
    "source": "Stubhub",
    "suggestionCriteria": "following",
    "suggestedBy": "FriendSuggest",
    "suggestingUser": {
        "userId": 4,
        "firstName": "Ashish",
        "lastName": "Chandra",
        "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
    },
    "timeLine": "January 31 at 07:01 PM",
    "startDate": "2015-01-31 00:00:00.0",
    "endDate": "2015-01-31 00:00:00.0",
    "address": "Barclays Center Parking Lots\nBrooklyn,New York 11217",
    "isBooked": true
}

];

I put it inside ng-repeat . I waana make a filter which will filter these items on basis of ratings(1 ,2,3,4,5) and price (0-9 ;10 -99 ,100-999). I dont have any idea how to proceed in it . Any Help ?

Plunker Link : http://plnkr.co/edit/8ArGO1OvT7FHIV1ixSEA?p=preview

1 Answer 1

1

First off, there is a problem in the JSON the way price is represented. For instance,

"price" :6 $;

is not valid and should be listed as

"price" :6 ,

There are a couple of prices where this is happening. Next, you can use the following

HTML

<div ng-app="myApp" ng-controller='MainCtrl'>
    Rating : <select ng-model='filterParams.rating' ng-options='i for i in ratingParams'><option value=''></option></select>
     &nbsp;&nbsp;
    Price : <select ng-model='filterParams.price' ng-options="p.range for p in priceParams"><option value=''></option></select>
    <hr/>
    <table class="table table-condensed table-striped" >
        <thead>
            <tr>
            <th>Id</th>
            <th>Type</th>
            <th>Name</th>
            <th>Rating</th>
            <th>Price</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="j in json | customFilter:filterParams">
            <td>{{j.itemId}}</td>
            <td>{{j.businessType}}</td>
            <td>{{j.name}}</td>
            <td>{{j.rating}}</td>
            <td>{{j.price}}</td>
        </tr>
        </tbody>
    </table>
</div>

And the following Javascript:

var app = angular.module("myApp",[]);

app.filter("customFilter", function(){
    return function(items, filterParams){        
        var filteredItems = [];

        if (filterParams) {

            angular.forEach(items, function(value){
                var matchRating = true, matchPrice = true;

                // Ratings filter
                if (filterParams.rating){ matchRating = value.rating >= filterParams.rating;}

                // Price filter
                if (filterParams.price){ matchPrice = value.price >= filterParams.price.lower &&  value.price <= filterParams.price.upper;}

                // If items pass both filter, include them
                if (matchRating && matchPrice) {filteredItems.push(value);}
            })
        } 
        else {

            // If no filters specified
            filteredItems = items;   
        }
        return filteredItems;
    }
})

app.controller("MainCtrl", function($scope){
    $scope.priceParams = [
        {range : '0-9', lower: 0, upper:9},
        {range : '10-99', lower: 10, upper:999},
        {range : '100-999', lower: 100, upper:999}
     ];
    $scope.ratingParams = [1,2,3,4,5];

    $scope.json = [
    {
        "itemId": 1062,
        "businessType": "SPORT",
        "name": "Modern Martial Arts Vitor Shaolin Brazilian Jiu Jitsu",
        "websiteUrl": "http://www.yelp.com/biz/modern-martial-arts-vitor-shaolin-brazilian-jiu-jitsu-new-york",
        "rating": 5,
        "city": "New York",
        "address": "780 8th Ave (b/t 47th St & 48th St) Hell's Kitchen New York NY 10036",
        "imageUrl": "http://s3-media3.ak.yelpcdn.com/bphoto/JHk9p_jYX1QpQN4Im-p3jA/ms.jpg",
        "source": "Yelp",
        "price" : 6,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 8227,
        "businessType": "SPORT",
        "name": "TGA of Bergen County",
        "websiteUrl": "http://www.golftga.com/Default.aspx?alias=www.golftga.com/bergencounty",
        "city": "Wayne",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "price" :26,
        "rating" : 4,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3932,
        "businessType": "SPORT",
        "name": "Willowbrook Golf Center",
        "websiteUrl": "http://www.willowbrookgolfcenter.com",
        "city": "North Jersey",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "price" :36,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3918,
        "businessType": "SPORT",
        "name": "Church Street Boxing Gym & Pouncing Tigers",
        "websiteUrl": "http://www.csboxinggym.com/",
        "city": "New York City",
        "address": "201207 West 42nd Street New York NY 10036 USA",
        "source": "Groupon",
        "price" :106 ,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 1100,
        "businessType": "SPORT",
        "name": "CKO Kickboxing Carroll Gardens",
        "websiteUrl": "http://www.yelp.com/biz/cko-kickboxing-carroll-gardens-brooklyn-2",
        "rating": 4,
        "city": "Brooklyn",
        "address": "562 Court St (b/t Hamilton Ave & Garnet St) Carroll Gardens Brooklyn NY 11231",
        "imageUrl": "http://s3-media2.ak.yelpcdn.com/bphoto/guwuh08U_tYTyRsjLQIJ-w/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 462,
        "businessType": "SPORT",
        "name": "TITLE Boxing Club",
        "websiteUrl": "http://www.titleboxingclub.com",
        "city": "Wayne",
        "address": "Wayne NJ 07470 USA",
        "source": "Groupon",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 474,
        "businessType": "SPORT",
        "name": "Centercourt Athletic Club of Morristown",
        "websiteUrl": "http://www.centercourtclub.com/club/scripts/section/section.asp?CLNK=1&NS=CMT",
        "city": "Wayne",
        "address": "Wayne NJ 07470 USA",
        "source": "Groupon",
        "price":1008,
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 3326,
        "businessType": "SPORT",
        "name": "Legends Baseball Instruction",
        "websiteUrl": "http://www.legendsbaseballinstruction.com",
        "city": "North Jersey",
        "address": "17 North Jersey Lane Wayne NJ 07470 USA",
        "source": "Groupon",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Self",
        "suggestingUser": {
            "userId": 1,
            "firstName": "Gaurav",
            "lastName": "Shandilya",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/1_1401692790212_Ashish"
        }
    },
    {
        "itemId": 1104,
        "businessType": "SPORT",
        "name": "Adirondack Sailing",
        "websiteUrl": "http://www.yelp.com/biz/adirondack-sailing-new-york",
        "rating": 4,
        "city": "New York",
        "address": "62 Chelsea Piers New York NY 10011",
        "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/FwpUOlPWSpLlEteBGukcpg/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Friend",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        }
    },
    {
        "itemId": 1709,
        "businessType": "SPORT",
        "name": "Manhattan Sailing Club",
        "websiteUrl": "http://www.yelp.com/biz/manhattan-sailing-club-new-york",
        "rating": 4,
        "city": "New York",
        "address": "385 S End Ave Ste 6H Battery Park New York NY 10280",
        "imageUrl": "http://s3-media1.ak.yelpcdn.com/bphoto/9yvzeSYaKfguvDUzF69xvw/ms.jpg",
        "source": "Yelp",
        "itemType": "Business",
        "suggestionCriteria": "like",
        "suggestedBy": "Friend",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        }
    },
    {
        "eventId": 9743,
        "description": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
        "event_date": "2015-01-31 00:00:00.0",
        "venue_name": "Barclays Center Parking Lots",
        "city": "Brooklyn",
        "urlpath": "http://www.stubhub.com/parking-passes-only-igor-krutoi-gala-concert-brooklyn-barclays-center-parking-lots-31-1-2015-9004479",
        "totalTickets": "0.0",
        "title": "PARKING PASSES ONLY Igor Krutoi Gala Concert Tickets",
        "ancestorGenreDescriptions": "[All tickets, Concert tickets, Artists H - K, Igor Krutoi Gala Tickets]",
        "itemType": "Event",
        "category": "Concert",
        "source": "Stubhub",
        "suggestionCriteria": "following",
        "suggestedBy": "FriendSuggest",
        "suggestingUser": {
            "userId": 4,
            "firstName": "Ashish",
            "lastName": "Chandra",
            "imageUrl": "http://54.243.29.6:8080/UploadedImages/4_1400934645640_Ashish"
        },
        "timeLine": "January 31 at 07:01 PM",
        "startDate": "2015-01-31 00:00:00.0",
        "endDate": "2015-01-31 00:00:00.0",
        "address": "Barclays Center Parking Lots\nBrooklyn,New York 11217",
        "isBooked": true
    }
]

});

You can see this at the following JSFiddle : http://jsfiddle.net/FvTjD/33/. The current solution indicates rating as a greater than or equal to, therefore, if you choose a rating of 3, it will filter for those items that are rated 3 and up. The solution can be changed to show only the specific rating easily.

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

2 Comments

Thanks but instead of if else in both filter i wanna activate both at same time
I updated the solution and jsfiddle to active both filters at the same time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.