J'ai le tableau JavaScript suivant d'objets immobiliers :
var json = {
'homes': [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
},
// ... (more homes) ...
]
}
var xmlhttp = eval('(' + json + ')');
homes = xmlhttp.homes;
J'aimerais pouvoir effectuer un filtre sur l'objet pour renvoyer un sous-ensemble d'objets "maison".
Par exemple, je veux pouvoir filtrer sur les critères suivants : "prix", "superficie", "nombre de lits" et "nombre de bains".
Comment puis-je effectuer quelque chose en JavaScript comme le pseudo-code ci-dessous :
var newArray = homes.filter(
price <= 1000 &
sqft >= 500 &
num_of_beds >=2 &
num_of_baths >= 2.5 );
Notez que la syntaxe ne doit pas nécessairement être exactement comme ci-dessus. Il s'agit simplement d'un exemple.
Vous pouvez utiliser la méthode [Array.prototype.filter
][1] :
var newArray = homes.filter(function (el) {
return el.price <= 1000 &&
el.sqft >= 500 &&
el.num_of_beds >=2 &&
el.num_of_baths >= 2.5;
});
Exemple concret :
var obj = {
'homes': [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
},
// ... (more homes) ...
]
};
// (Note that because `price` and such are given as strings in your object,
// the below relies on the fact that <= and >= with a string and number
// will coerce the string to a number before comparing.)
var newArray = obj.homes.filter(function (el) {
return el.price <= 1000 &&
el.sqft >= 500 &&
el.num_of_beds >= 2 &&
el.num_of_baths >= 1.5; // Changed this so a home would match
});
console.log(newArray);
Cette méthode fait partie de la nouvelle norme [ECMAScript 5ème édition][2] et est présente dans presque tous les navigateurs modernes.
Pour IE, vous pouvez inclure la méthode suivante par souci de compatibilité :
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = [];
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this) {
var val = this[i];
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter [2] : http://www.ecma-international.org/publications/standards/Ecma-262.htm
Vous pouvez essayer d'utiliser un framework comme jLinq - voici un exemple de code d'utilisation de jLinq
var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();
Pour plus d'informations, vous pouvez suivre le lien http://www.hugoware.net/projects/jlinq.
Vous pourriez faire cela assez facilement - il y a probablement beaucoup d'implémentations parmi lesquelles vous pouvez choisir, mais c'est mon idée de base (et il y a probablement un format où vous pouvez itérer sur un objet avec jQuery, je n'y pense pas pour le moment) :
function filter(collection, predicate)
{
var result = new Array();
var length = collection.length;
for(var j = 0; j < length; j++)
{
if(predicate(collection[j]) == true)
{
result.push(collection[j]);
}
}
return result;
}
Et ensuite vous pourriez invoquer cette fonction comme ceci :
filter(json, function(element)
{
if(element.price <= 1000 && element.sqft >= 500 && element.num_of_beds > 2 && element.num_of_baths > 2.5)
return true;
return false;
});
De cette façon, vous pouvez invoquer le filtre en fonction du prédicat que vous définissez, ou même filtrer plusieurs fois en utilisant des filtres plus petits.