Show JSON data based on checkbox choice

Question

I'm wondering if it is possible to show specific JSON data, based on a choice made with a checkbox.

At this moment I have specific JSON data with peoples names, department, sex and internet usage. I've managed to show this data by name, department and I drew a bar for the usage.

I've made two checkboxes that show this JSON data when checked. However at this particular moment they still show the same data. I need to find a way to sort it out, after trying certain things, it's kinda getting lost on me.

This is the code for getting the JSON data, showing it and the checkboxes + the code behind it:

JS :

$(document).ready(function() {
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="female") {
            $(".female").toggle();
        }
        if($(this).attr("value")=="male") {
            $(".male").toggle();
        }
    });
});

ajax();

function ajax() {
    $.ajax({
        url:"wifi_data.json",
        dataType:"json",
        success: function(data) {
            //if(data.geslacht == "man") {
            $.each(data, function(index, item) {                           
                $('#females').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                                     '<br>Department: ' + data[index].afdeling +
                                     '<br>Usage: ' + '<div style="width:'+ 
                                     data[index].verbruik*0.001  
                                     +'px;height:10;border:2px solid ; background-color:red;"></div>' +
                                     '<div style="'+ '<br>Sex: ' +
                                     data[index].geslacht +'"></div>'  );
            }); 
            //}

            //if(data.gelsacht =="vrouw") {
                $.each(data, function(index, item)
                       {                           
                    $('#males').append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                                       '<br>Department: ' + data[index].afdeling +
                                       "<br>Usage: " + '<div style="width:'+ 
                                       data[index].verbruik*0.001  
                                       +'px;height:10;border:2px solid ; background-color:red"></div>' );
                });
            //}
        }   
    })
}

HTML :

<div>
    <label><input type="checkbox" name="colorCheckbox" value="female"> Show Female Members</label>
        <br>
    <label><input type="checkbox" name="colorCheckbox" value="male"> Show Male Members</label>
</div>
<div class="female box">
    <div id="females"></div>
</div>
<div class="male box">
    <div id="males"></div>
</div>

What I've tried to do here with the commented parts of the code (and some code that is removed) is to only append males when "geslacht"(sex) is man(male) or vrouw(female).

I've also tried to append the sex and to then put it in a div and hide it. In order to maybe check if male or female is checked, then show the hidden div's with all the men or females in it.

My issue is that I'm having a huge brain fart on the part how to check what is checked, and then only gather the males or females from the JSON file based on choice.

The JSON looks like this:

{
    "46": {
    "voornaam": "Sergio",
    "achternaam": "Bloemenouw",
    "verbruik": "100000",
    "afdeling": "FHACI",
    "geslacht": "man",
    "verbruikPercentage": "18.2%"
},
"25": {
    "voornaam": "Chayenne",
    "achternaam": "Aalberink",
    "verbruik": "200000",
    "afdeling": "FHEHT",
    "geslacht": "vrouw",
    "verbruikPercentage": "36.4%"
},

and so on...

Hopefully someone can steer me into the correct direction. I think the most important thing I need to figure out is how to only show either the females or the males including their name, usage("verbruikPercentage") and department("afdeling")

Answer 1

Your question contains two problems. One is to separate data into male and female parts, and the other one is about showing/hiding the elements.

For the data separation, you need to do the if statement for each data item, since it is the item that contains the geslacht property.

$.each(data, function(index, item) {                          
    var target = item.geslacht === 'man' ? $('#males') : $('#females');
    target.append('<br>Name: ' + data[index].voornaam + ' ' + data[index].achternaam + 
                  '<br>Department: ' + data[index].afdeling +
                  '<br>Usage: ' + '<div style="width:'+ data[index].verbruik*0.001 +
                  'px;height:10;border:2px solid ; background-color:red;"></div>' +
                  '<div style="'+ '<br>Sex: ' + data[index].geslacht +'"></div>');
});

---

For the toggling, I didn't see anything wrong for now. You can focus on the data processing part for now, and do more debugging on it later.

Answer 2

Your if condition should be inside $.each() loop as follows:

        $.each(data, function(index, item) {  
            if(item.geslacht == "man") {
            }
            else if(item.geslacht == "vrouw")
            {
            }
        })