Make a offline Search using JSON file

Question

I am making a Estate site will be OFFLINE. I have done most of the site but stuck at how to search using JSON (I have never used JSON before). I have these search options in which user can search different properties with different options . I know how to link the JSON file with html but dont know how to link search button and JSON file so when user chooses different option they can get result depending on their filter option.once again the search will be OFFLINE.

link to code snippet of form and json file

Code Snippet of form

</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 JSON file please check the link I posted.

Answer 1

The solution is to filter the array of properties. Let's assume you store your javascript object about properties in variable data, then data.properties is an array of properties and you can filter this array based on the selection criteria like type, price range and bedroom nubers range.

And to make dom manipulation easier, jquery is used in the solution.

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

DEMO in JSFiddle