根據最低和最高價格過濾JSON數據

Question

我不確定如何根據價格（在JSON數據中指定-價格）過濾JSON數據，我有兩個下拉列表，一個用於最低價格，另一個用於最高價格。 來自json的數據需要在兩個下拉列表的范圍內，如果是，則需要從JSON的html頁面中輸出一些數據，例如ID，價格，類型，描述等。我是初學者和學習。

這是我的JSON數據

{
    "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
            }
        }
    ]
}

這是我的Java腳本HTML

<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>

任何幫助表示贊賞，謝謝

Answer 1

您可以更正此問題並嘗試（在ID之前添加哈希）：

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

Answer 2

在接受@ sudip-pal的建議后，您必須自己遍歷數據。 與其他工具相比，jQuery顯得蒼白。 有多種選擇，ES5（現代瀏覽器）具有用於管理循環的內置方法，對於較舊的瀏覽器， Underscore或Lo-Dash為此類操作創造了奇跡。

由於這個問題僅是JS / jQuery，因此我將展示兩種方法（僅ES5和jQuery）：

ECMAScript 5

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

jQuery（舊的瀏覽器）

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

下划線/ Lo-Dash

通過比較，這里與實用程序庫相同：

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>