Question

我有一个包含两个不同假日度假村的JSON文件。我想将两个下拉菜单中的值与JSON文件中的两个值进行比较。

例如，如果.navbar-default { background-color: transparent; }下拉菜单的值为＆＃34;加勒比＆＃34;选中，destination下拉列表的值为＆＃34; 4＆＃34;选中，然后我想搜索外部JSON文件，找到与这些描述匹配的度假村，并显示那些匹配度假村的所有信息。

HTML：

comfortLevel

JavaScript的：

        <div class="searchDestination">
            <br>
            <label><b>Select your destination: &nbsp;</b></label>
            <select id="destination">
                <option value="0">Please Select:</option>
                <option value="europe">Europe</option>
                <option value="africa">Africa</option>
                <option value="carribian">The Carribian</option>
                <option value="asia">Asia</option>
            </select>
        </div>

    <div class="searchComfortLevel">
        <br>
        <label><b>Select your Comfort Level: &nbsp;</b></label>
        <select id="comfortLevel">
            <option value="0">Please Select:</option>
            <option value="3">Three Star</option>
            <option value="4">Four Star</option>
            <option value="5">Five Star</option>>
        </select>
        </div>

        <div id="buttons">
        <button id="reset" class="button-error pure-button" style="color:white">Reset</button> 
        <button id="search" class="button-success pure-button" style="margin-left:5px; color:white">Search</button>
        </div>

Resort.json

$( "#search" ).click(function() {
    var destination = $('option:selected', "#destination").attr('value');
    var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
    $.getJSON('resort.json', function (data) {
        $.each(resorts, function(i, v) {
            if (v.destination == "Carribian") {
                alert(v.destination);
            }
        });
    });
});

Answer 1

您正在循环错误的数据：

$( "#search" ).click(function() {
    var destination = $('option:selected', "#destination").attr('value');
    var comfortLevel = $('option:selected', "#comfortLevel").attr('value');

    $.getJSON('resort.json', function (data) {
        $.each(data.resort, function(i, v) { // <-- line changed
            if (v.destination == "Caribbean") { // <-- fixed typo
                alert(v.destination);
            }
        });
    });
});

注意：您确定返回JSON说＆＃34; resort＆＃34;不是＆＃34;度假村＆＃34;？如果是这种情况，则相应地更新该行。

Answer 2

$( "#search" ).click(function() {
    var destination = $('option:selected', "#destination").attr('value');
    var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
    $.getJSON('resort.json', function (data) {
        $.each(data, function(i, v) {
            $.each(v, function(i, resort) {
                if (resort.destination == "Carribian") {
                    alert(v.destination);
                }
            });
        });
    });
});

循环通过外部JSON文件

2 个答案: