Ik heb de volgende JavaScript array van onroerend goed huis objecten:
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;
Wat ik zou willen doen is in staat zijn om een filter uit te voeren op het object om een subset van "home" objecten terug te geven.
Bijvoorbeeld, ik wil kunnen filteren op basis van: prijs
, oppervlakte
, aantal_bedden
, en aantal_baden
.
Hoe kan ik iets in JavaScript uitvoeren zoals de pseudo-code hieronder:
var newArray = homes.filter(
price <= 1000 &
sqft >= 500 &
num_of_beds >=2 &
num_of_baths >= 2.5 );
Let op, de syntaxis hoeft niet precies zo te zijn als hierboven. Dit is slechts een voorbeeld.
U kunt de methode Array.prototype.filter
gebruiken:
var newArray = homes.filter(function (el) {
return el.price <= 1000 &&
el.sqft >= 500 &&
el.num_of_beds >=2 &&
el.num_of_baths >= 2.5;
});
Live Voorbeeld:
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);
Deze methode maakt deel uit van de nieuwe ECMAScript 5th Edition standaard, en is te vinden op bijna alle moderne browsers.
Voor IE, kunt u de volgende methode voor compatibiliteit opnemen:
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;
};
}
U kunt proberen met behulp van kader zoals jLinq - hieronder is een code voorbeeld van het gebruik van jLinq
var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();
Voor meer informatie kunt u de link http://www.hugoware.net/projects/jlinq volgen.
Je zou dit vrij gemakkelijk kunnen doen - er zijn waarschijnlijk vele implementaties waar je uit kunt kiezen, maar dit is mijn basis idee (en er is waarschijnlijk een of andere format waar je over een object kunt itereren met jQuery, ik kan het me nu alleen niet herinneren):
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;
}
En dan zou je deze functie als volgt kunnen oproepen:
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;
});
Op deze manier kun je het filter oproepen op basis van het predicaat dat je definieert, of zelfs meerdere keren filteren met kleinere filters.