if 语句未按预期评估条件

Question

我正在使用 $.getJSON 函数从 API 的员工工资中 return JSON。对于每个条目，我都有一个计数器，每个雇员 returned 都会增加。我添加了一个列表，允许用户选择员工所在的部门作为变量来检查函数何时出错。当检查功能对所有员工运行时，它按预期工作 returning 1000 名员工。但是，当我在 if 语句中添加时，它确实将任何员工添加到员工计数器中。

我正在将所选部门记录到控制台，可以看到部门已正确选择。我认为放入一个 "Department of Police" 的字符串以在函数中使用，它 return 186 名员工。如果我使用变量 checkedValue，它在控制台中显示相同的值，我希望与 return 186 名员工具有相同的功能，但事实并非如此。该值作为字符串保存在 JSON 对象中，因此我不确定错误的数据是否是问题所在。

我做错了什么？

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<body>
    <div id="page">
        <div id="content">
            <div id="button-area">
                <button id="check">Check the radio button</button>
                <button id="action">Do Action</button>
            </div>
            <div id="checks">
            </div>
            <div>
                <ul id="list"></ul>
            </div>
        </div>
    </div>
</body>

CSS:

body {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    height: 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

#page {
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 3px 3px 5px 2px black;
}

#content {
    margin: 10px;
}

#button-area {
    padding-top: 50px;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}

JavaScript:

var url;
var myNewObject;
var myObject;
var departmentArray;
var cleanedDepartmentArray;
var checkedValue;
var budget = 0;
var employees = 0;

function setTheList() {
    $.getJSON(url, function(data) {
        myObject = data;
        for (var i = 0; i < myObject.length; i++) {
            departmentArray.push(myObject[i].department_name);
        };
        $.each(departmentArray, function(i, el) {
            if ($.inArray(el, cleanedDepartmentArray) === -1) {
                cleanedDepartmentArray.push(el);
            }
        });
        for (var i = 0; i < cleanedDepartmentArray.length; i++) {
            $('#list').html("");
            $('#checks').append("<li><input type='radio' name='department' value='" +
                cleanedDepartmentArray[i] + " '>" + cleanedDepartmentArray[i] +
                "</li>");
        };
    });
};
$(document).ready(function() {
    console.log("Initialized with " + employees + " employees and " + budget +
        " budget.");
    url = 'https://data.montgomerycountymd.gov/resource/54rh-89p8.json';
    myObject;
    myNewObject;
    departmentArray = [];
    cleanedDepartmentArray = [];
    //set the list
    setTheList();
    //get checked radio button value
    function getCheckedValue() {
        checkedValue = "";
        checkedValue = $("input[name=department]:checked").val();
        console.log(checkedValue);
    };
    //call geojson
    function getData(checkedValue) {
        getCheckedValue();
        $.getJSON(url, function(data) {
            myNewObject = data;
            console.log("my new object: ", myNewObject)
            for (i = 0; i < data.length; i++) {
                if (data[i].department_name === checkedValue) {
                    employees++;
                };
            };
            console.log(checkedValue);
            console.log(employees)
        });
    };
    $('#check').on('click', function() {
        getCheckedValue();
    });
    $('#action').on('click', function() {
        getData(checkedValue);
    });
});

Answer 1

下一行的 value 属性值后有一个 space。我想这不应该在这里？

$('#checks').append("<li><input type='radio' name='department' value='" +
                cleanedDepartmentArray[i] + " '>" + cleanedDepartmentArray[i] +
                "</li>");

看看我能否为您更清楚地强调这一点：

下一行的 value 属性值后有一个 space。我想这不应该在这里？

$('#checks').append("<li><input type='radio' name='department' value='" +
                cleanedDepartmentArray[i] + " '>" + cleanedDepartmentArray[i] +
                "</li>");

只是想看看我是否可以更好地突出它：

cleanedDepartmentArray[i] + " ' <<< this bit

if 语句未按预期评估条件

if statement not evaluating condition as expected

javascript

evaluation

json

if-statement