Question

我有一个json，它有ver，price和level的键。在我的html中有3个用于ver的单选按钮，以及每个价格和级别的3个复选框。我附加了一个更改事件，它只会输出或过滤样本obj，它可以是一个组合，具体取决于价格和级别的复选框。我正在过滤我的结果吗？检查时我期望成为我的输出：如果我选择ver = 1，price = 1，level = 1，则应输出2个对象。

var obj = {
 "sample" :[
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "0", "price":"2", "level": 2},
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "1", "price":"3", "level": 3},
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "0", "price":"2", "level": 1},
    {"ver": "1", "price":"3", "level": 3}
  ]
}

var priceArr = [];
var levelArr= [];
var out;

var price = $("input[name='price']").change(function(){
  var checked = $(this).val();
  if ($(this).is(':checked')) {
        priceArr.push(checked);
        return priceArr;
  }else {
        priceArr.splice($.inArray(checked, priceArr),1);
        return priceArr;
  }
});
var level = $("input[name='level']").change(function(){
  var checked = $(this).val();
  if ($(this).is(':checked')){
      //convert string val to int
      levelArr.push(parseInt(checked));
      return levelArr;
    }else{
      levelArr.splice($.inArray(checked, levelArr),1);
      return levelArr;
    }
});


$("input[type='radio'][name='ver'], input[name='price'], input[name='level']").change(function(){
  var r = $("input[type='radio'][name='ver']:checked").val();
  var p = price;
  var l = level;
  sortResult(r,p,l);

 });

 function sortResult(r,p,l){
  p.sort();
  l.sort();

  if(r != undefined && p != "" && l != ""){
    obj.sample.map(function(i){
        if (i.ver == r){
            //filter the price in which they belong to
            if( i.price == p[0] && i.price == p[1] && i.price == p[2]){
                //output price that is filtered
                console.log(i.price)
              if(i.level == l[1] || i.level || l[2] || i.level == l[2] ){
                //output level that is filtered 
                console.log(i.level) 
              }
            }
        }
        output =  '<div>Ver '  + i.ver   +'</div>';
        output += '<div>Price' + i.price +'</div>';
        output += '<div>Level' + i.level +'</div>';
    });//map
  }//if
}//sortResult

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form >
    <div><input type="radio" name="ver" value="0" >All</div>
    <div><input type="radio" name="ver" value="1" >ver1</div>
    <div><input type="radio" name="ver" value="2" >ver2</div>
  </form>
</div>

<div>
  <form >
    <div><input type="checkbox" name="price" value="1" >Price 1</div>
    <div><input type="checkbox" name="price" value="2" >Price 2</div>
    <div><input type="checkbox" name="price" value="3" >Price 3</div>
  </form>
</div>

<div>
  <form >
    <div><input type="checkbox" name="level" value="1" >Level 1</div>
    <div><input type="checkbox" name="level" value="2" >Level 2</div>
    <div><input type="checkbox" name="level" value="3" >Level 3</div>
  </form>
</div>


<div class="output"></div>

Answer 1

var obj = {
 "sample" :[
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "0", "price":"2", "level": 2},
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "1", "price":"3", "level": 3},
    {"ver": "1", "price":"1", "level": 1},
    {"ver": "0", "price":"2", "level": 1},
    {"ver": "1", "price":"3", "level": 3}
  ]
};

function getCheckedBoxes(chkboxName) {
  var checkboxes = document.getElementsByName(chkboxName);
  var checkboxesChecked = [];
  for (var i=0; i<checkboxes.length; i++) {
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i].value);
     }
  }
  // Return the array if it is non-empty, or null
  return checkboxesChecked.length > 0 ? checkboxesChecked : [];
}


$("input").change(function(){
  var r = $("input[type='radio'][name='ver']:checked").val();
  var ver = r == 0 ? null : r - 1;
  sortResult(ver,getCheckedBoxes("price"),getCheckedBoxes("level"));

 });

function sortResult(r,p,l){
    obj.sample.map(function(i){
        if (p.indexOf(i.price) >= 0 && l.indexOf(i.level+"") >= 0) {
          if (r && i.ver == r){
            console.log(i);
          } else if (!r) {
            console.log(i);
          }
       }
    });
}

说实话，你的代码没有处理很多边缘情况，p和l是函数而不是数组。即便是那些也没有正确形成。

使用多个if语句过滤json的输出

1 个答案: