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

Question

我有一个对象数组：

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

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

我希望新数组在复选框发生变化时随时更新。因此，如果选中 "teacher"，您将仅获得第一个对象的新数组。如果同时检查 "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只是获取对应的checkbox元素，测试是否被选中

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>

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

Use checkboxes to filter to a new array of objects - javascript

javascript

arrays

checkbox

function

object