javascript - 如何在单击输入时从对象中过滤数据？

Question

我正在从一个名为 emp 的对象中检索数据。我正在遍历对象并连续打印每个条目。

我想让用户在勾选复选框时能够过滤他们的数据。例如。如果他们点击复选框，则只显示 33 岁以下的员工。

到目前为止我的代码:

   var emp = {
"employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
]
}

$(document).ready(function() {
var fixtureHTML = "";
 $.each(emp.employees, function(key, value) { 
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';

            if($("#check").is(':checked')) {
                if(value.details.age < 33) {
                   return false;
                }
            }
});
$('.js-load').append(fixtureHTML);
});

<div class="js-load"></div>
<input type="checkbox" name="check-filter" value="unit-in-group" id="check"/>
Check this box for filter by employees younger than 30

Answer 1

我不认为这是最好的方法，但这可以给你一个想法

var emp = {
"employees":[
    {
        "firstName":"John",
        "details": {
            "role" : "manager",
            "age" : 55
        },
        "lastName":"Doe"
    }, 
    {
        "firstName":"Anna",
        "details": {
            "role" : "cashier",
            "age" : 35
        },
        "lastName":"Smith"
    }, 
    {
        "firstName":"Peter",
        "details": {
            "role" : "manager",
            "age" : 23
        },
        "lastName":"Jones"
    }, 
    {
        "firstName":"Jim",
        "details": {
            "role" : "cleaner",
            "age" : 20
        },
        "lastName":"Doveson"
    }, 
    {
        "firstName":"Nick",
        "details": {
            "role" : "waiter",
            "age" : 38
        },
        "lastName":"Doe"
    }
]
}

$(document).ready(function() {
var fixtureHTML = "";
 $.each(emp.employees, function(key, value) { 
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
});
$('.js-load').append(fixtureHTML);
});

$("#check").on("change",function(){
  var check = $(this);
  $('.js-load').html("");
  var fixtureHTML = "";
  $.each(emp.employees, function(key, value) { 
  if(check.is(':checked')) {
                if(value.details.age < 33) {
                  fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
                }
            } else{
             
            fixtureHTML += '<div class="media">'
            fixtureHTML += '<div class="meta-info">';
            fixtureHTML +=  '<span class="info">' + value.firstName + '</span>';
            fixtureHTML += '<span class="info">' + value.lastName + '</span>';
            fixtureHTML += '<span class="role">' + value.details.role + '</span>';
            fixtureHTML += '<span class="age">' + value.details.age+ '</span>';
            fixtureHTML += '</div></div>';
              }
    });
  $('.js-load').append(fixtureHTML);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="js-load"></div>
<input type="checkbox" name="check-filter" value="unit-in-group" id="check"/>
Check this box for filter by employees younger than 30