[removed] How to create an Object and filter on those attributes? [duplicate]

Answer 1

Here you go:

var filteredArray = filter(myBigObject.homes, {

    price: function(value) {
        value = parseFloat(value);
        return value >= 150000 && value <= 400000;
    },

    num_of_baths: function(value) {
        value = parseFloat(value);
        return value >= 2.5;
    },

    num_of_beds: function(value) {
        value = parseFloat(value);
        return value === 1 || value === 3;
    }

});

And the filter function:

function filter( array, filters ) {

    var ret = [],
        i = 0, l = array.length,
        filter;

    all: for ( ; i < l; ++i ) {

        for ( filter in filters ) {
            if ( !filters[filter](array[i][filter]) ) {
                continue all;
            }
        }

        ret[ret.length] = array[i];

    }

    return ret;

}

Answer 2

I've revised this answer several times, and people can look at the wiki if there interested in the revisions, but this is the final solution I've come up with. It's very similar to many of the others posted here, the key difference being that I've extended the Array.prototype wrapped the Array.prototype.filter function such that the test statements are evaluated in the scope of the array element instead of the array.

The main advantage I see with this solution rather than simply using the filter method directly is that it allows you to write generic tests that test the value of this[key]. Then you can create a generic form elements associated with a specific tests, and use metadata from the objects to be filtered (houses in this case) to associate specific instances of the form elements with keys. This not only makes the code more reusable, but I think it makes actually constructing the queries programmatically a bit more straightfoward. Also, since you can define generic form elements (say a multi-select for distinct values, or a set of dropdowns for a range), you could also create a more powerful query interface where additional form elements could be injected dynamically allowing users to create complex and customized queries. Here is what the code breaks down into:

Before doing anything you should first check to see if the filter function exists and extend the Array.prototype if it doesn't as mentioned in other solutions. Then extend the Array.prototype to wrap the filter function. I've made it so that the arguments are optional in case someone wants to employ a test function that doesn't take any for some reason, I've also tried to include errors to help you implement the code:

Array.prototype.filterBy = function(testFunc, args)
{
    if(args == null || typeof args != 'object') args = [args];
    if(!testFunc || typeof testFunc != 'function') throw new TypeError('argument 0 must be defined and a function');
    return this.filter(function(elem)
        {
        return testFunc.apply(elem, args);
    });
};

This takes a test function, and an argument array, and defines an inline function as the callback for the Array.prototype.filter function which calls function.prototype.apply to execute the test function in the scope of the array element being tested with the specified arguments. You can then write a suite of generic testing functions like these:

testSuite = {

     range : function(key, min, max)
     {
          var min = parseFloat(min);
          var max = parseFloat(max);
          var keyVal = parseFloat(this[key]);
          if(!min || !max|| !keyVal) return false;
          else return keyVal >= min && keyVal <= max;
     },

     distinct : function(key, values)
     {
          if(typeof key != 'string') throw new TypeError('key must be a string');
          if(typeof values != 'object') values = [values];
          var keyVal = this[key];
          if(keyVal == undefined) return false;


          for(var i in values)
          {
             var value = values[i];
             if(typeof value == 'function') continue;
             if(typeof value == 'string')
             {
                  if(keyVal.toString().toLowerCase() == value.toLowerCase()) return true;
                  else continue; 
             }
             else
             {
                 keyVal = parseFloat(keyVal);
                 value = parseFloat(value);
                 if(keyVal&&value&&(keyVal==value)) return true;
                 else continue;

            }
          }
          return false;
     }
};

These are just the test functions associated with the requirements in your question, however you could create additional ones that do more complex things like test string values against a regular expression, or test key values that aren't simple datatypes.

Then you extend the object containing the houses array like so (I've called it housesData, call it whatever it is in your code):

 housesData.filterBy = function(tests)
 {
      ret = this.homes.slice(0);
      if(tests)
      {
           for(var i in tests)
           {
               var test = tests[i];
               if(typeof test != 'object') continue;
               if(!test.func || typeof test.func != 'function') throw new TypeError('argument 0 must be an array or object containing test objects, each with a key "func" of type function');
               else ret = ret.filterBy(test.func, test.args ? test.args : []);
           }
      }
      return ret;
 }

You could then call this function like so to get a result set using the generic functions defined above:

 result = housesData.filterBy([{func:range,args:['price','150000','400000'],
                      {func:distinct,args:['num_of_bedsf',[1, 2, 3]]}]);

The way I would actually forsee using this however is to serialize the generic form elements I mentioned earlier into an array or hashmap of the test objects. Here's a simple example I used to test this code (I used jQuery, because it's easier, all the previous code is in example.js, along with @artlung's dummy homes array):

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:myNS="http://uri.for.your.schema" xml:lang="en" lang="en">
<head>
    <script src="jquery-1.3.2.js" type="text/javascript" language="javascript"></script>
    <script src="example.js" type="text/javascript" language="javascript"></script>
    <script type="text/javascript" language="javascript">
        runQuery = function(event)
        {
            var tests = [];
            $('#results').attr('value', '');;
            controls = $('#theForm > fieldset');
            for(var i = 0; i < controls.length ; i++)
            {
                var func;
                var args = [];
                control = controls.eq(i);
                func = testSuite[control.attr('myNS:type')];
                args.push(control.attr('myNS:key'));
                var inputs = $('input', control);
                for(var j=0; j< inputs.length; j++)
                {
                    args.push(inputs[j].value);
                }
                tests.push({func:func,args:args});
            }
            result = housesData.filterBy(tests);
            resultStr = '';
            for(var i = 0; i < result.length; i++)
            {
                resultStr += result[i]['home_id'];
                if(i < (result.length -1)) resultStr += ', ';
            }
            $('#results').attr('value', resultStr);
        }
    </script>
</head>
<body>
  <form id="theForm" action="javascript:null(0)">
    <fieldset myNS:type="range" myNS:key="price">
        <legend>Price:</legend>
        min: <input type="text" myNS:type="min"></input>
        max: <input type="text" myNS:type="max"></input>
    </fieldset>
    <fieldset myNS:type="distinct" myNS:key="num_of_beds">
        <legend>Bedrooms</legend>
        bedrooms: <input type="text" myNS:type="value"></input>
    </fieldset>
    <button onclick="runQuery(event);">Submit</button>
  </form>
  <textarea id="results"></textarea>
    </body>
 </html>

Answer 3

I agree about not reinventing the wheel, and just using the native Array filter method.

The function definition shown on the Mozilla page will add filter if it's missing, regardless of the browser, by using object detection (if (!Array.prototype.filter))

Any of the methods suggesting eval and/or multiple for loops are both slow and potentially unsafe.

You didn't say so, but I'm assuming the values will be coming from user input (a form) so I'd do something like:

var filtered_results = obj.homes
    .filter(function (home)
    {
        return parseInt(home.price) >= document.getElementsByName('price_gt')[0].value;
    })
    .filter(function (home)
    {
        return parseInt(home.price) <= document.getElementsByName('price_lt')[0].value;
    })
    .filter(function (home)
    {
        return parseFloat(home.num_of_baths) >= document.getElementsByName('baths_gt')[0].value;
    });

better yet, don't iterate through the list N times and just do:

var filtered_results = obj.homes.filter(function (home)
{
    return (
        parseInt(home.price) >= document.getElementsByName('price_gt')[0].value &&
        parseInt(home.price) <= document.getElementsByName('price_lt')[0].value &&
        parseFloat(home.num_of_baths) >= document.getElementsByName('baths_gt')[0].value
    );
});

I know this doesn't match the requested syntax but this approach is faster and more flexible (by not using eval or hardcoded values).

Answer 4

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;
 }

Answer 5

The Underscore.js library works well for these tasks. It uses native JavaScript commands when they are present. I've managed to get of many iterative loops using this library.

Bonus, the latest version is chainable, like jQuery.

Answer 6

I am assuming you want the syntax sugar of being able to call filter direction on the homes array to generate a new array of only the filter accepted results.

Use a object prototype to define a filter function on the array object that accepts a hash of parameter filters. Then you can easily use that hash to generate and return a new array of homes that match the desired property.