Question

我有一个对象数组：

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

我想使用复选框来过滤＆＃34; job＆＃34;然后有一个新的单独的对象数组被过滤（保留原始数组）。

我希望随时更新新数组复选框。所以如果＆＃34;老师＆＃34;如果选中，则只获得第一个对象的新数组。如果＆＃34;律师＆＃34;和＃34;医生＆＃34;同时检查，然后用第二，第三和第四个对象的新数组等替换该教师数组...

这是我的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只获取相应的复选框元素并测试是否已选中。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: