Alex Rivera | Logout

JavaScript: How to create an Object and filter on those attributes?

Asked 2009-11-07T22:53:37.980
14

I have a JavaScript array of houses like so,

{
    "homes" : [{
        "home_id"         : "1",
        "address"         : "321 Main St",
        "city"            : "Dallas",
        "state"           : "TX",
        "zip"             : "75201",
        "price"           : "925",
        "sqft"            : "1100",
        "year_built"      : "2008",
        "account_type_id" : "2",
        "num_of_beds"     : "2",
        "num_of_baths"    : "2.0",
        "geolat"          : "32.779625",
        "geolng"          : "-96.786064",
        "photo_id"        : "14",
        "photo_url_dir"   : "\/home_photos\/thumbnail\/2009\/06\/10\/"
    }],
    ..........
}

I want to provide 3 different search methods.

How can I return a subset of this homes area array that has:

  • The price between X and Y
  • The bathrooms >= Z
  • The # of bedrooms == A or == B or == C

For example, how would I create the psuedo code like:

homes.filter {price >= 150000, price <= 400000, bathrooms >= 2.5, bedrooms == 1 | bedrooms == 3}
javascript html json filter
Edit
Report

2 Answers

3

I like this question so I'm taking a shot at it. How about a "chained" style of code, where the object you have returns itself, a la some of the JavaScript DOM frameworks.

I'm calling your Object MyObj:

MyObj.filter('home.price >= 150000')
     .filter('home.price <= 400000')
     .filter('home.num_of_baths >= 2.5')
     .filter('home.num_of_beds == 1 || home.bedrooms == 3');

And here's the source code, this example works.

var MyObj = {
    filter : function(rule_expression) {
        var tmpHomes = [];
        var home = {};
        for(var i=0;i<this.homes.length;i++) {
            home = this.homes[i];
            if (eval(rule_expression)) {
                tmpHomes.push(home);
            }
        }
        this.homes = tmpHomes;
        return this;
    },
    homes: [
    {
        "home_id"         : 1,
        "address"         : "321 Main St",
        "city"            : "Dallas",
        "state"           : "TX",
        "zip"             : "75201",
        "price"           : 300000,
        "sqft"            : 1100,
        "year_built"      : 2008,
        "account_type_id" : 2,
        "num_of_beds"     : 1,
        "num_of_baths"    : 2.5,
        "geolat"          : 32.779625,
        "geolng"          : -96.786064,
        "photo_id"        : "14",
        "photo_url_dir"   : "\/home_photos\/thumbnail\/2009\/06\/10\/foo.jpg"
    },
    {
        "home_id"         : 2,
        "address"         : "555 Hello World Way",
        "city"            : "Dallas",
        "state"           : "TX",
        "zip"             : "75201",
        "price"           : 200000,
        "sqft"            : 900,
        "year_built"      : 1999,
        "account_type_id" : 2,
        "num_of_beds"     : 1,
        "num_of_baths"    : 1.0,
        "geolat"          : 32.779625,
        "geolng"          : -96.786064,
        "photo_id"        : "14",
        "photo_url_dir"   : "\/h
answered 2009-11-07T23:14:09.337
2

Take a look at the $.grep function in the jQuery library. Even if you don't use the library, you can look at the code and see how they accomplished the task you are trying to do.

EDIT: Here's some code:

 function filter(houses, filters) // pass it filters object like the one in @J-P's answer
 {
      retArr = $.grep(houses, 
           function(house)
           {
                for(var filter in filters)
                {
                     function test = filters[filter];
                     if(!test(house)) return false;
                }
                return true;
           });

      return retArr;
 }
answered 2009-11-07T22:57:31.367

Your Answer