if语句未按预期评估条件

时间:2015-11-15 01:41:10

标签: javascript json if-statement evaluation

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

我正在将所选部门记录到控制台,并且可以看到部门已正确选择。我认为放入一串"Department of Police"在功能中使用,它返回186名员工。如果我使用在控制台中显示的变量checkedValue相同的值,我希望相同的函数返回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);
    });
});

1 个答案:

答案 0 :(得分:1)

在下面一行中value属性的值之后有一个空格。我认为这不应该在这里吗?

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

看看我是否可以为您更清楚地说明这一点:

在下面一行中value属性的值之后有一个空格。我认为这不应该在这里吗?

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

看看我是否可以更好地突出它:

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