使用索引位置按另一个数组中的值过滤一个数组 - javascript

Question

我正在处理一个非常大的数据立方体，我需要对其进行操作以实现数据可视化。我有一个多维数组，其中包含对象的所有可能组合的数组，每个数组的最终对象是一个关联值。

我正在使用多个输入（每个输入都有基于数据中值索引的 id 枚举）以允许用户按数组中的每个对象过滤结果，但显示为 [= 的最后一个对象除外30=]。从这些输入中，我将选择聚合到一个变量中，以便选择的索引对应于数据中关联值的索引位置。

var selections = [];
var data = [[val0, val1, val2, 5121231], [val0, val1, val2, 2242], [val0, val1, val2, 72356], [val0, val1, val2, 24122], [val0, val1, val2, 75632]];

$('#fields').change(function(){
    for (var i = 0; i < data[0].length; i ++){
        selections[i] = $('select#field' + i).val();
    }
});

这将创建一个如下所示的多维数组：

selections = [[data[0][0], data[1][0], data[2][0], data[3][0], data[4][0]], [data[0][1], data[1][1], data[2][1], data[3][1], data[4][1]], [data[0][2], data[1][2], data[2][2], data[3][2], data[4][2]], [data[0][3], data[1][3], data[2][3], data[3][3], data[4][3]]]

我想做的是过滤数据，这样对于所有选择，如果 data[x][i] === selections[i] 中的任何值，data[x] 被填充到一个新的大批。

有什么想法吗？

*****更新*****

非常感谢 Dave 的帮助！我们能够设置相关的下拉过滤器来操作无键多维数组（数据立方体）。如果您在浏览器中处理大型数据集，请查看解决方案。以下是 he/we 得出的结论：

https://jsfiddle.net/JSnoobDC16/yteu6cbb/28/

Answer 1

由于您使用的是 jQuery，因此可以使用 $.grep() combined with Array.some() 轻松解决此问题。

var newArray = $.grep(data, function(item) {
  return selections.some(function(selectedValue, i) {
    return selectedValue.indexOf(item[i]) >= 0;
  });
});

下面有一个完整的片段，这里有一个更新的 fiddle：https://jsfiddle.net/gh8fzxLh/

//function to initialize the materialize dropdowns
function pageReady() {
  $(document).ready(function() {
    $('select').material_select();
  });
}

//function to get the sum of object elements
function sum( obj ) {
  var sums = 0;
  for( var el in obj ) { 
    if( obj.hasOwnProperty( el ) ) {
      sums += parseFloat( obj[el] );
    }
  }
  return sums;
}

//function to return array of all values at a certain index positon
function getFields(matrix, index){
  var fields = [];
  for (var i = 1; i<matrix.length; i++ ){
    fields.push(matrix[i][index]);
  }
  return fields;
}

//function to return only unique values from array
function unique(arr) {
  var hash = {}, uniqueArr = [];
  for ( var i = 0, l = arr.length; i < l; ++i ) {
    if ( !hash.hasOwnProperty(arr[i]) ) { 
      hash[ arr[i] ] = true;
      uniqueArr.push(arr[i]);
    }
  }
  return uniqueArr;
}

//importing data set
var data = [
  ["state", "gender", "martial staus", "ethnicity"],
  ["GA", "null", "null", "Caucasian", 5086317],
  ["FL", "", "null", "null", 4338099],
  ["IN", "M", "null", "African-American", 72238],
  ["GA", "", "married", "Caucasian", 390578],
  ["MO", "null", "null", "Caucasian", 4165871],
  ["MO", "", "married", "Caucasian", 344501],
  ["NY", "null", "null", "African-American", 1204504],     ["AR", "M", "single", "Caucasian", 164311],
  ["CO", "null", "married", "null", 551192],
  ["OH", "null", "married", "Caucasian", 1017924],
  ["LA", "M", "null", "East Asian", 3229],
  ["AZ", "F", "single", "Uncoded", 21302],
  ["AR", "", "married", "Middle Eastern", 187]
];

var selections = []; //variable to hold all selected values
var valCombos = data[0].length; //establishing number of dropdown selection objects

/* Adding multiselection dropboxes (and soon to be other data inputs)
for each field. */
for (var i = 0; i < valCombos; i ++){
  var options = unique(getFields(data, i)).sort();
  $('#selectBar').append('<div class="row section params" id="fieldRow' + i + '"><div class="col s12 input-field" id="fieldparams"><select class="fields" id="field' + i + '" multiple><option value="" disabled selected>Select Values</option></select><label>' + data[0][i] + '</label></div></div>');
  $.each(options, function (index, value) {
    $('#field' + i).append('<option value="' + value + '">' + value + '</option>');
  });
}

pageReady();

/*Updating "selections" array as user makes selections. 
"Selections" will be used to filter the cube for visualizations. */
$('.fields').change(function(){
  for (var i = 0; i < valCombos; i ++) {
    selections[i] = $('select#field' + i).val();
  }
  console.log(selections);

  var selectedData = getSelectedData(data, selections);
  
  console.log(selectedData);
  $("#count").text(sumData(selectedData));

});

function getSelectedData(data, selections) {
  return $.grep(data, function(item) {
    return selections.some(function(value, i) {
      return value.indexOf(item[i]) >= 0;
    });
  });
}

function sumData(selectedData) {
  return selectedData.reduce(function(prev, current) {
    return prev + current[current.length - 1];  
  }, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div id="count">
  Sum of lastIndexOf values displays here
</div>
<div id="selectBar">
</div>

使用索引位置按另一个数组中的值过滤一个数组 - javascript

Using index position to filter an array by values in another array - javascript

javascript

loops

multidimensional-array

data-visualization

data-cube