使用复选框过滤到新的对象数组 - javascript

Question

我有一个对象数组：

var array = [
    {"date":"Jan 1", "job":"teacher"},
    {"date":"Jan 1", "job":"lawyer"},
    {"date":"Jan 2", "job":"doctor"},
    {"date":"Jan 4", "job":"doctor"}
    ];

我想使用复选框按“作业”过滤，然后有一个新的单独的对象数组被过滤（保持原始数组不变）。

我希望在复选框更改时更新新数组。所以如果“老师”被选中，你只会得到一个新的第一个对象数组。如果“lawyer”和“doctor”同时被检查，那么你用第二个，第三个和第四个对象的新数组替换那个教师数组，等等......

这是我所拥有的JSFIDDLE。我有一些纯文本用于我被卡住的地方。

我认为需要一个函数来识别文本框状态的变化并推送到新数组。

function handleChange(){
    if ("checkbox state changes") {
        array.filter(filterByJob);
        newArray.push();
    }       
}

然后另一个函数进行过滤。

function filterByJob(obj) {
  if ('job' in obj === "rel, value, id, etc of checked boxes" {
      return true;
  }
}

var newArray = [];

对于某些上下文，该数组将包含大约 20,000 个对象。而且我最终需要它灵活地考虑更多属性。最终不止一个复选框列表，因此可以组合使用多个复选框列表来制作这个新数组。但这是从现在开始的 14 个问题 :)

我是否接近从根本上以正确的方式思考这个问题？我看过一堆例子，但似乎无法拼凑出这个确切的场景。感谢您能给我的任何帮助！

Answer 1

你不需要测试状态是否改变，因为onchange 只在状态改变时触发。 filterByJob 只是获取对应的复选框元素，并测试它是否被选中。

var array = [
    {"date":"Jan 1", "job":"teacher"},
    {"date":"Jan 1", "job":"lawyer"},
    {"date":"Jan 2", "job":"doctor"},
    {"date":"Jan 4", "job":"doctor"}
];

var newArray = array.slice();
showArray(newArray);

function showArray(array) {
    document.getElementById("result").innerHTML = JSON.stringify(array);
}

function handleChange() {
  newArray = array.filter(filterByJob);
  showArray(newArray);
}

function filterByJob(e) {
  return document.getElementById(e.job).checked;
}

<input type="checkbox" onchange="handleChange()" name="Job" rel="teacher" value="teacher" id="teacher" checked>Teacher
<input type="checkbox" onchange="handleChange()" name="Job" rel="lawyer" value="lawyer" id="lawyer" checked>Lawyer
<input type="checkbox" onchange="handleChange()" name="Job" rel="doctor" value="doctor" id="doctor" checked>Doctor

<div id="result"></div>