Javascript 使用JSON文件进行脱机搜索

我正在制作一个地产网站将脱机。我已经完成了站点的大部分工作，但仍然坚持使用JSON进行搜索（我以前从未使用过JSON）。我有这些搜索选项，用户可以用不同的选项搜索不同的属性。我知道如何用html链接JSON文件，但不知道如何链接搜索按钮和JSON文件，因此当用户选择不同的选项时，他们可以根据自己的筛选选项获得结果。再次，搜索将脱机

表单的代码段

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

找到你的财产
类型：
房子
公寓
平房
土地

价格范围：
0
50,000
100,000
150,000
200,000
致：
50,000
100,000
150,000
200,000
250,000
300,000 
350,000 
400,000 
五十万或以上
卧室:
无敏
1.
2.
3.
没有max
1.
2.
3.
3.
给我看看房子

---

对于JSON文件，请检查我发布的链接。

解决方案是过滤属性数组。假设您将有关属性的javascript对象存储在变量数据中，那么data.properties是一个属性数组，您可以根据选择标准（如类型、价格范围和卧室数量范围）筛选该数组

为了简化dom操作，解决方案中使用了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));
});

var getProperties=function（类型、最小价格、最大价格、最小价格、最大价格）{
如果（typeof minBed==“未定义”）{minBed=0；}
如果（typeof maxBed==“未定义”）{maxBed=Number.MAX_VALUE；}
返回数据.properties.filter（函数（elem）{
var expType=type.indexOf（elem.type）>=0；
var expPrice=elem.price>=minPrice&&（maxpprice==Number.MAX_值？true:elem.price=minBed:elem.beddooms>=minBed&&elem.beddooms=0？Number.MAX_值：parseInt（$（“#maxpprice”）.val（）.替换（“，”，”）；
var minBed=isNaN（parseInt（$（“#minBed”）.val（））？0:parseInt（$（“#minBed”）.val（））；
var maxBed=isNaN（parseInt（$（“#maxBed”）.val（））？Number.MAX_值：parseInt（$（“#maxBed”）.val（））；
var properties=getProperties（类型、minPrice、maxPrice、minBed、maxBed）；
$（“#占位符”）.text（JSON.stringify（properties））；
});

---

JSON是JavaScript对象表示法，因此您应该首先了解java脚本对象是如何构造的。我知道它不是家庭作业服务，但它是一个帮助社区，这就是我提出问题的原因。我只想知道如何连接JSON文件（可以在JSFIDLE链接中看到）任何帮助都会很好。@mkoryak这就是我在html中所做的链接json文件$.getJSON（'properties.json'，function（data）{var output=“

””，for（var i in data.properties）{output+=“
• ”+data.properties[i].type+“
”；}}）；非常感谢@user2466202给出了这个清晰的答案。当我看到搜索结果时，还有一个问题将显示为代码中的警报。如果我想在html页面中显示，代码是否类似于此文档。getElementById（“占位符”）。innerHTML=data.properties。（当然，我会用占位符ID制作div标记）。非常感谢您迄今为止的帮助，并提前感谢您提供的任何进一步帮助。P.J我修改了代码以在带有id占位符的容器中显示数据。但我想，要显示原始数据，您可能需要正确设置数据格式，如添加一些样式。谢谢。您是否可以指导我如何设置数据格式以正确查看数据在html中是y，因为它是一个JSON文件，因为格式化JSON文件是不可能的，因为它必须以这种方式构造（在顶部，我以前没有使用JSON）.我可能会把整个代码搞乱。如果你能举个例子，那么我就可以完成了。再次感谢你，非常感谢你的帮助。P.J.当然，我明天会做，因为今晚我需要坐14小时的飞机回家。先生，你现在能做吗？@user2466202

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