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

Question

I have an array of objects:

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

I want to use checkboxes to filter by "job" and then have a new separate array of objects that is filtered (leaving the original array intact).

I'd like the new array to update anytime checkboxes change. So if "teacher" is checked, you get a new array of first object only. If "lawyer" and "doctor" are checked simultaneously, then you replace that teacher array with a new array of the second, third, and fourth objects, etc...

Here is what I have JSFIDDLE . I have some plain text in there for the places I'm stuck.

I'm thinking there needs to be a function that identifies a change in textbox status and pushes to a new array.

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

Then another function to do the filtering.

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

var newArray = [];

For some context, the array will have about 20,000 objects. And I'll need it to be flexible to account for more properties eventually. And ultimately more than one checkbox list so multiple checkbox lists can be used in combination to make this new array. But that's 14 questions from now :)

Am I anywhere close to thinking about this the right way foundationally? I've looked at a bunch of examples but can't seem to piece together this exact scenario. Thanks for any help you can give me!

Answer 1

You don't need to test if the state changes, because onchange only fires when the state changes. filterByJob just gets the corresponding checkbox element and tests whether it's checked or not.

 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>