Показать данные JSON на основе выбора флажка

Question

Мне интересно, можно ли отображать конкретные данные JSON на основе выбора, сделанного с помощью флажка.

В данный момент у меня есть конкретные данные JSON с названиями людей, отделами, сексом и использованием Интернета. Мне удалось показать эти данные по имени, отделу, и я нарисовал планку для использования.

Я сделал два флажка, которые показывают эти данные JSON, когда они отмечены. Однако в этот конкретный момент они все же показывают одни и те же данные. Мне нужно найти способ разобраться в этом, попробовав некоторые вещи, это как бы заблудилось на мне.

Это код для получения данных в формате JSON, показывая его и флажков + код позади него:

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> 

Что я вы пытались сделать здесь с комментариями части кода (и некоторый код, который удаляется) - это только добавлять мужчин, когда «geslacht» (секс) - мужчина (мужчина) или vrouw (женщина).

Я также пытался добавить секс, а затем положить его в div и скрыть. Чтобы, возможно, проверить, проверен ли мужчина или женщина, затем покажите скрытый div со всеми мужчинами или женщинами в нем.

Моя проблема в том, что у меня огромный мозговой пердит на части, как проверить, что проверяется, а затем собирать самцов или самок из файла JSON по выбору.

JSON выглядит следующим образом:

{ 
    "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%" 
}, 

и так далее ...

Надеюсь, кто-то может порулить меня в правильном направлении. Я думаю, что самое важное, что мне нужно выяснить, - это показать только самки или самцов, включая их имя, использование («verbruikPercentage») и отдел («afdeling»)

Answer 1

Ваше if условие должно быть внутри $.each() петли следующим образом:

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

Answer 2

Ваш вопрос содержит две проблемы. Один из них состоит в том, чтобы разделить данные на мужскую и женскую части, а другой - на отображение/скрытие элементов.

Для разделения данных, вы должны сделать if заявления для каждого элемента данных, так как элемента, который содержит geslacht свойства.

$.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>'); 
}); 

---

Для переключени, я не вижу ничего плохого в настоящее время. На данный момент вы можете сосредоточиться на части обработки данных и позже выполнять дополнительную отладку.