我正在使用$.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);
});
});
答案 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