javascript - 过滤一个或多个匹配的字符串以减少数据集

标签 javascript jquery arrays filter

我正在尝试根据存储在 localStorage 中的字符串过滤一组数据。字符串的数量可以是 0 - 4。(如果该字符串存在,那么我将其拆分为逗号)。

目前我的函数循环遍历数据,并减少集合但仅根据第一个字符串。

我需要一些方法来遍历数据 x 次并使用推送将过滤后的数据存储到一个新数组中(我假设)。我猜它正在传递第一个字符串选择器并减少集合。

我这里有一个 jsfiddle:https://jsfiddle.net/lharby/fxv94185/ 1

为简单起见,我只是将字符串存储到一个变量中(而不是使用 jsfiddle 本地存储)。 var chQualityFilters = "ok,ko" 这可以在 fiddle 中更改为空字符串,或者四个选择器 '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"
   }
]

完整数据集在这里(如 fiddle 中所用):https://api.myjson.com/bins/14xw8x

最佳答案

我认为你需要改变:

for(var i=0; i<chQualityFilters.length; i++){ 
   return (d.Status.toLowerCase() == chQualityFilters[i]);
}

类似于:

return chQualityFilters.includes(d.Status.toLowerCase())

关于javascript - 过滤一个或多个匹配的字符串以减少数据集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48211540/

相关文章:

Java,画e十字

javascript - MediaElement.js + jQuery 改进了播放列表(希望如此)

javascript - TypeError : $(. ..).easyAutocomplete 不是一个函数

javascript - jQuery 在链接上反跳

javascript - jQuery .toggleClass() 在打开后不会关闭该类

python - 沿着 3D NumPy 数组的后 2 个维度移动窗口以获得 3D block

javascript - 页面加载后基于复选框隐藏/显示 div

javascript - 如何在 javaScript 中使用特定键对对象进行分组

javascript - 使用 Javascript 分配样式与在服务器端脚本中分配样式

java - 为什么创建 HashMap 比创建 Object[] 更快?