【发布时间】:2018-01-11 16:16:45
【问题描述】:
我正在尝试根据存储在 localStorage 中的字符串过滤一组数据。字符串的数量可以是 0 - 4。(如果字符串存在,那么我用逗号分隔它)。
目前我的函数循环遍历数据,并减少集合,但仅根据第一个字符串。
我需要一些方法来循环数据 x 次,并使用 push(我想)将过滤后的数据存储到一个新数组中。我猜它是通过第一个字符串选择器并减少集合。
我这里有一个 jsfiddle:https://jsfiddle.net/lharby/fxv94185/1
为简单起见,我只是将字符串存储到一个变量中(而不是使用 jsfiddle 本地存储)。 var chQualityFilters = "ok,ko" 这可以在小提琴中更改为空字符串,或者四个选择器 'ok'、'ko'、'spark'、'oos' 中的一个或多个。
完整代码在这里:
var url = 'https://api.myjson.com/bins/14xw8x';
var dataWrapper = $('.data-wrapper');
var endSpan = '</span><span>';
var spanWide = '</span><span class="wide">';
var chQualityFilters = "ok,ko"; // this can be 1 or more of 'ok', 'ko', 'spark', 'oos'
returnQualityData = function(){
$.ajax({
type:'GET',
url:url,
dataType:'json',
success:function(data){
if (chQualityFilters !== null && chQualityFilters !== 'none') {
getSetFilters();
}
var filteredData = data.filter(function(d){
for(var i=0; i<chQualityFilters.length; i++){ // how to loop over the chQualityFilters array a second time.
return (d.Status.toLowerCase() == chQualityFilters[i]);
}
});
console.log(filteredData);
dataWrapper.empty();
dataWrapper.prepend('<li class="title"><span>'
+'Date' + spanWide
+'Database name' + spanWide
+'Table name'+ endSpan
+'Lake <br />volume'+ endSpan
+'Source <br />volume'+ endSpan
+'Difference'+ endSpan
+'Null %'+ endSpan
+'Std. index'+ endSpan
+'Hazard <br />index'+ endSpan
+'Source data available'+ endSpan
+'Status'
+'</span></li>');
for(var i in filteredData){
var statusLowerCase = filteredData[i]["Status"].toLowerCase();
var year = filteredData[i]["Data Date"].slice(0,4);
var month = filteredData[i]["Data Date"].slice(4,6);
var day = filteredData[i]["Data Date"].slice(6,8);
var date = day+ "/" +month+ "/" +year;
dataWrapper.append('<li class="' +statusLowerCase+ '"><a href="#"><span>'
+date+ spanWide
+filteredData[i]["Database Name"]+ spanWide
+filteredData[i]["Table Name"]+ endSpan
+filteredData[i]["Lake Volume"]+ endSpan
+filteredData[i]["Source Volume"]+ endSpan
+filteredData[i].Difference+ endSpan
+filteredData[i]["Null Percent"]+ endSpan
+filteredData[i]["Standardisation Index"]+ endSpan
+filteredData[i]["Hazard Index"]+ endSpan
+filteredData[i]["Source Data Available"]+ '</span><span class="status hideFont ' +statusLowerCase+ '">' +statusLowerCase
+ '</span></a>'
+ '<ul class="sub-data">'
+ '<li><span>Source database name</span> ' +filteredData[i]["Source Database Name"] + '</li>'
+ '<li><span>Ingestion frequency</span> ' +filteredData[i]["Ingestion Frequency"]+ '</li>'
+ '<li><span>Unload type</span> ' +filteredData[i]["Unload Type"]+ '</li>'
+ '<li><span>Number of columns</span> ' +filteredData[i]["Number Of Columns"]+ '</li>'
+ '</ul>'
+ '</li>');
}
},
error:function(status){
},
complete:function(){
}
});
return false;
}();
getSetFilters = function() {
var qualityFilterInput = $('[name="filterStatus"]');
if (chQualityFilters !== null && chQualityFilters !== 'none') {
chQualityFilters = chQualityFilters.split(',');
}
if(chQualityFilters){
for(var i=0; i<chQualityFilters.length; i++){
$('[data-filter="status"] [value=' +chQualityFilters[i]+ ']').prop('checked',true);
}
}
}
数据样本:
[
{
"Database Name":"bu",
"Table Name":"pro_fis",
"Status":"OOS",
"Ingestion Frequency":"Daily - Mon-Sun",
"Unload Type":"Full",
"Source Database Name":"n/a",
"Data Date":"20170426",
"Number Of Columns":"31",
"Lake Volume":"384931",
"Source Volume":"0",
"Difference":"384931",
"Difference Percent":"100",
"Null Percent":"0",
"Standardisation Index":"79.7425",
"Hazard Index":"0.000002",
"Source Data Available":"No"
},
{
"Database Name":"ca",
"Table Name":"prepart_",
"Status":"Spark",
"Ingestion Frequency":"Daily - Mon-Sun",
"Unload Type":"Full",
"Source Database Name":"bp1",
"Data Date":"20171021",
"Number Of Columns":"43",
"Lake Volume":"0",
"Source Volume":"1699573",
"Difference":"1699573",
"Difference Percent":"0",
"Null Percent":"0",
"Standardisation Index":"0",
"Hazard Index":"0",
"Source Data Available":"Yes"
},
{
"Database Name":"ca",
"Table Name":"pte_co",
"Status":"Spark",
"Ingestion Frequency":"Daily - Mon-Sun",
"Unload Type":"Full",
"Source Database Name":"sv09",
"Data Date":"20171021",
"Number Of Columns":"13",
"Lake Volume":"0",
"Source Volume":"2848018",
"Difference":"2848018",
"Difference Percent":"0",
"Null Percent":"0",
"Standardisation Index":"0",
"Hazard Index":"0",
"Source Data Available":"Yes"
}
]
完整数据集在这里(在小提琴中使用):https://api.myjson.com/bins/14xw8x
【问题讨论】:
-
不知道问题是什么。
-
如果变量
chQualityFilters == 'ok',循环遍历数据并删除所有与status = ok不匹配的记录。如果chQualityFilters = 'ok,oos',用逗号分割字符串,我们现在需要循环两次数据。首先按Status == ok过滤,然后再次循环并将Status == 'oos'添加到过滤后的数据中。那有意义吗?返回状态 == 'ok' && 状态 == 'oos'。
标签: javascript jquery arrays filter