Filtering JSON Data based on Min and Max Price

Question

I'm not sure how to filter my JSON data according to price (specified in my JSON data - price) I have two drop down lists, one for min price and the other for max price. The data from my json needs to be within the range of my two drop down lists and if it does, some data needs to be outputted in my html page from my JSON ie ID, Price, Type, description, etc. I'm a beginner and learning.

This is my JSON data

{
    "Properties": [
        {
            "id": "prop1",
            "type": "House",
            "bedrooms": 3,
            "price": 650000,
            "tenure": "Freehold",
            "description": "Attractive three bedroom semi-detached family home situated within 0.5 miles of Petts Wood station with fast trains to London and within easy walking distance of local shops, schools, bus routes and National Trust woodland. The property comprises; two receptions, fitted 18'9 x 10'1 kitchen/breakfast room and conservatory. The property also benefits from having a utility room and cloakroom. To the first floor there are three bedrooms and a family bathroom with separate WC. Additional features include double glazing, gas central heating and a well presented interior...",
            "location": "Petts Wood Road, Petts Wood, Orpington",
            "picture": "images/prop1pic1small.jpg",
            "url": "properties/prop1.html",
            "added": {
                "month": "January",
                "day": 12,
                "year": 2014
            }
        },
        {
            "id": "prop2",
            "type": "Flat",
            "bedrooms": 2,
            "price": 299995,
            "tenure": "Freehold",
            "description": "Presented in excellent decorative order throughout is this two double bedroom, two bathroom, garden flat. <br>The modern fitted kitchen is open plan to the living room which boasts solid wooden floors and includes integrated appliances including a dishwasher & a washing machine. This large open plan benefits from bi folding doors onto a secluded private courtyard garden. Both bedrooms are double sized, and the family bathroom boasts a matching three piece suite a shower attachment over the bath. There is also a separate wet room. There are walnut doors throughout and wiring for Sky TV/aerial points in the living room/kitchen and both bedrooms.<br>This apartment being only five years old, is still under a 10 year building guarantee...",
            "location": "Crofton Road Orpington BR6",
            "picture": "images/prop2pic1small.jpg",
            "url": "properties/prop2.html",
            "added": {
                "month": "September",
                "day": 14,
                "year": 2014
            }
        },
        {
            "id": "prop3",
            "type": "House",
            "bedrooms": 4,
            "price": 950000,
            "tenure": "Freehold",
            "description": "Addison Townends are delighted to offer this outstanding semi detached house of over 2500 square feet located in this prestigious location within 500 yards of Southgate Underground Station and within excellent primary and secondary school catchments. The property offers four double bedrooms, two bathrooms, two receptions, kitchen/breakfast room and downstairs cloakroom. Externally the property boasts two driveways of over 60' each both with gated access, double garage, studio with en-suite shower room and approximately 85' South West facing rear garden. The property is offered chain free and internal viewing comes highly recommended.",
            "location": "High Street London",
            "picture": "images/prop3.jpg",
            "url": "properties/prop3.html",
            "added": {
                "month": "November",
                "day": 19,
                "year": 2014
            }
        },
        {
            "id": "prop4",
            "type": "House",
            "bedrooms": 5,
            "price": 825000,
            "tenure": "Freehold",
            "description": "A charming five bedroom semi detached family home boasting many original features, conveniently located on the High Street in Southgate. This characterful property offers 2122 sq ft.",
            "location": "High Street Southgate",
            "picture": "images/prop4.jpg",
            "url": "properties/prop4.html",
            "added": {
                "month": "October",
                "day": 23,
                "year": 2014
            }
        },
        {
            "id": "prop5",
            "type": "Flat",
            "bedrooms": 5,
            "price": 64999950,
            "tenure": "Freehold",
            "description": "Apartment C.08.1 is an exceptional apartment stretching across the entire floor plate of pavilion C and as such boasts magnificent views of both Knightsbridge and Hyde Park. The interior design of Apartment C.08.1 responds both to its unique size as well as its extraordinary location. The apartment is divided into two wings; the five bedrooms can be found in the city wing whilst all the living and entertaining spaces are in the park wing.",
            "location": "Knightsbridge  London  SW1X 7LJ",
            "picture": "images/prop5.jpg",
            "url": "properties/prop5.html",
            "added": {
                "month": "March",
                "day": 15,
                "year": 2014
            }
        },
        {
            "id": "prop6",
            "type": "House",
            "bedrooms": 3,
            "price": 200000,
            "tenure": "Freehold",
            "description": "Fitted kitchen with a range of wall and base units, cupboard housing boiler, sink and drainer ,rolled edge worksurfaces, gas and electric cooker point, plumbing for washing machine and space for fridge freezer. Feature gas fire with marble surround,serving hatch and dual double glazed window to front and rear aspect, two radiators. UPVC door to front, under stairs storage, stairs to first floor, radiator and door to lounge/dining area.",
            "location": "Bandley Rise Stevenage SG2",
            "picture": "images/prop6.jpg",
            "url": "properties/prop6.html",
            "added": {
                "month": "August",
                "day": 4,
                "year": 2014
            }
        },
        {
            "id": "prop7",
            "type": "Flat",
            "bedrooms": 2,
            "price": 200000,
            "tenure": "Freehold",
            "description": "Offered with no onward chain located in the centre of Romford within 0.3 miles of Romford Main Line Station is this two bedroom apartment. Benefitting from en-suite to the master bedroom, as well as a 23ft lounge/kitchen with bi-folding doors opening onto the balcony. The property also has the addition of a family bathroom and own secure parking space. EPC C.",
            "location": "Rubicon Court South Street Romford RM1",
            "picture": "images/prop7.jpg",
            "url": "properties/prop7.html",
            "added": {
                "month": "July",
                "day": 23,
                "year": 2014
            }
        }
    ]
}

And this is my HTML with Java Script

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            $("#search").on("click", function() {
                $.getJSON('data.json', function(data) {
                    var minPrice = $("minPrice").val();
                    var maxPrice = $("maxPrice").val();
                    var output = "<ul>";
                    for (var l in data.Properties) {
                        if ((data.Properties[l].price >= minPrice) && (data.Properties[l].price <= maxPrice)) {

                            output += "<li>" + data.Properties[l].id + "</li>";
                            output += '<img src="' + data.Properties[l].picture + '" />';
                            output += "</ul>";
                            document.getElementById("placeholder").innerHTML = output;
                        }
                    }
                });
            });
        });
    </script>
    <form>
        <select id="minPrice" name="minPrice">
            <option value="100000">100000</option>
            <option value="150000">£150,000</option>
            <option value="200000">£200,000</option>
            <option value="250000">£250,000</option>
        </select>
        <select id="maxPrice" name="maxPrice">
            <option value="100000">£100,000</option>
            <option value="150000">£150,000</option>
            <option value="200000">£200,000</option>
            <option value="6000000">25000000</option>
        </select>
    </form>
    <button id="search">Search Staff</button>
</body>
</html>

Any help is appreciated, thanks

Answer 1

Can you correct this and try (added hash before ID):

var minPrice = $("#minPrice").val();
var maxPrice = $("#maxPrice").val();

Answer 2

After taking @sudip-pal's advise you'll have to loop through the data yourself. jQuery pales in comparison to other tools sadly. There are several options, ES5 (The modern browser) has built-in methods for managing loops, For older browsers Underscore or Lo-Dash do wonders for these kinds of operations.

Since this question was JS / jQuery only I'll show two methods (ES5 and jQuery only):

ECMAScript 5

function filterByPriceRange(objects, min, max) {
  return objects.reduce(function(memo, object) {
    if (min <= object.price < max) {
      memo.push(object);
    }
    return memo;
  }, []);
}

jQuery (old browsers)

function filterByPriceRange(objects, min, max) {
  var result = [];
  $.each(objects, function(index, object) {
    if (min <= object.price < max) {
      result.push(object);
    }
  });
  return result;
}

Underscore / Lo-Dash

By comparison here is the same with a utility library:

function filterByPriceRange(objects, min, max) {
  return _.filter(objects, function(object) {
    return (min <= object.price < max);
  });
}

Answer 3

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
    <script>


        $(document).ready(function() {
            $("#search").on("click", function() {
                $.getJSON('data.json', function(data) {
                    var minPrice = $("#minPrice").val();
                    var maxPrice = $("#maxPrice").val();
                    var output = "<ul>";

                    for (var l in data.Properties) {  //alert('price==>'+data.Properties[l].price);
                        if ((parseInt(data.Properties[l].price) >= parseInt(minPrice))  && (parseInt(data.Properties[l].price) <= parseInt(maxPrice))) {

                            output += "<li>" + data.Properties[l].id + "</li>";
                            output += '<img src="' + data.Properties[l].picture + '" />';
                            output += "</ul>";
                            //alert(data.Properties[l].id);

                        }
                    }
                    $("#placeholder").html(output);
                });
            });
        });
    </script>
    <form>
        <select id="minPrice" name="minPrice">
            <option value="1000000">100000</option>
            <option value="1500000">£150,000</option>
            <option value="2000000">£200,000</option>
            <option value="2500000">£250,000</option>
        </select>
        <select id="maxPrice" name="maxPrice">
            <option value="100000">£100,000</option>
            <option value="150000">£150,000</option>
            <option value="200000">£200,000</option>
            <option value="6000000">25000000</option>
        </select>
    </form>
    <button id="search">Search Staff</button>
    <div id="placeholder"></div>
</body>
</html>