Make offline search using JSON file
I am creating a real estate website that will be OFFLINE. I've done most of the site, but am stuck on how to search with JSON (I haven't used JSON before). I have these search options where the user can search for different properties with different options. I know how to link the JSON file to the html, but I don't know how to link the search button and the JSON file, so when the user selects a different option, he might get the result depending on the filter.once setting again, the search will be OFFLINE.
link to the code snippet of the form and json file
Snippet of form code
</form>
<h3>Find Your Property</h3>
<fieldset>
<label for="Type">Type:</label>
<select>
<option>House</option>
<option>Flat/Apartments</option>
<option>Bungalow</option>
<option>Land</option>
<label for="Price Range">Price Range:</label>
<select>
<option>0</option>
<option>50,000</option>
<option>100,000</option>
<option>150,000</option>
<option>200,000</option>
</select>
to:
<select>
<option>50,000</option>
<option>100,000</option>
<option>150,000</option>
<option>200,000</option>
<option>250,000</option>
<option>300,000 </option>
<option>350,000 </option>
<option>400,000 </option>
<option>500,000 or more</option>
</select>
<label for="Bedroom">Bedroom(s):</label>
<select>
<option>No min</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>No max</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>3</option>
</select></fieldset>
</fieldset><button Class="btn"type="button">Show me houses</button></fieldset>
</form>
for the JSON file, please check the link I posted.
source to share
The solution is to filter the array of properties. Suppose you are storing your javascript object about properties in variable data and then data.properties is an array of properties and you can filter this array based on selection criteria like type, price range and bedroom range.
And to make manipulating the dom easier, the solution uses jquery.
var getProperties = function(type, minPrice, maxPrice, minBed, maxBed) {
if (typeof minBed === "undefined") { minBed = 0; }
if (typeof maxBed === "undefined") { maxBed = Number.MAX_VALUE; }
return data.properties.filter(function (elem) {
var expType = type.indexOf(elem.type) >= 0;
var expPrice = elem.price >= minPrice && (maxPrice === Number.MAX_VALUE ? true : elem.price <= maxPrice);
var expBedrooms = (maxBed === Number.MAX_VALUE) ? elem.bedrooms >= minBed : elem.bedrooms >= minBed && elem.bedrooms <= maxBed;
return expType && expPrice && expBedrooms;
});
}
$("#showHouses").click(function () {
var type = $("#type").val();
var minPrice = parseInt($("#minPrice").val().replace(",", ""));
var maxPrice = $("#maxPrice").val().indexOf("more") >= 0 ? Number.MAX_VALUE : parseInt($("#maxPrice").val().replace(",", ""));
var minBed = isNaN( parseInt($("#minBed").val()))? 0 : parseInt($("#minBed").val());
var maxBed = isNaN(parseInt($("#maxBed").val())) ? Number.MAX_VALUE : parseInt($("#maxBed").val());
var properties = getProperties(type, minPrice, maxPrice, minBed, maxBed);
$("#placeHolder").text(JSON.stringify(properties));
});
source to share