在javascript中多次过滤答案

【问题标题】：Filtering through multiple times in javascript在javascript中多次过滤
【发布时间】：2013-08-03 07:03:44
【问题描述】：

所以，我有一个名为 products 的对象，它有 3 个属性：

var products = [
  {"name":"product1","size":"large","color":"blue","gender":"male"},
  {"name":"product2","size":"small","color":"pink","gender":"female"},
  {"name":"product3","size":"large","color":"green","gender":"male"},
  {"name":"product4","size":"large","color":"yellow","gender":"female"},
  {"name":"product5","size":"medium","color":"blue","gender":"female"},
  {"name":"product6","size":"large","color":"green","gender":"male"},
  {"name":"product7","size":"small","color":"yellow","gender":"male"},
  {"name":"product8","size":"medium","color":"red","gender":"female"},
  {"name":"product9","size":"large","color":"blue","gender":"male"},
  {"name":"product10","size":"small","color":"red","gender":"female"}
];

那么，如果我有 3 个选择框 用于尺寸、颜色和性别，我将如何过滤这 3 个以获得产品名称？

我正在尝试在 javascript 中使用 .filter。我知道如何在非关联数组中使用它。但是，关联数组呢？你如何使用它们？

【问题讨论】：

这不是关联数组。它是一个对象数组，name 是对象的属性之一。
即使 JS 中没有关联数组，这也是非关联数组
是的，但是您可以使用 products[0]['size'] 来调用它们，它会为您提供“大”。
你使用products[0].name，它给你product1
是的，你是对的。这是一个对象数组。但是，因为你可以通过 products[0]['size'] 来调用它，所以 products[0] 变成了一个关联数组。

标签： javascript object associative-array

【解决方案1】：

var color = document.getElementById("color").value;
var gender = document.getElementById("gender").value;
var size = document.getElementById("size").value;
var matched = products.filter(function(e) {
    return (e.color == color && e.gender == gender && e.size == size);
}).map(function(e) { return e.name; });

【讨论】：

很好的答案——只是他要求的是 JS 而不是 jQuery :)
谢谢，翻译成纯 JS。
这很简单，很棒！

【解决方案2】：

我写了一个 JSfiddle 来回答这个问题。在这里查看：http://jsfiddle.net/THEtheChad/XjGPt/

jQuery

$('input').change(function(){
   var names = filter();
});

function filter(){
  var selected = {
    size:   $('#size')  .val(),
    color:  $('#color') .val(),
    gender: $('#gender').val()

  };

  var matches = products.filter(function(product){
    return product.size == selected.size   &&
           product.color == selected.color && 
           product.gender == selected.gender;
  });

  return matches.map(function(product){ return product.name });
}

原版JS

var d = document;

var inputs = d.getElementsByTagName('input');
// Convert to array
inputs = Array.prototype.slice.call(inputs);

inputs.forEach(function(input){
   input.addEventListener('change', function(e){
      var names = filter();
   });
});

function filter(){
  var selected = {
    size:   d.getElementById('size')  .value,
    color:  d.getElementById('color') .value,
    gender: d.getElementById('gender').value

  };

  var matches = products.filter(function(product){
    return product.size == selected.size   &&
           product.color == selected.color && 
           product.gender == selected.gender;
  });

  return matches.map(function(product){ return product.name });
}

【讨论】：

【解决方案3】：

不像 Barmar 的代码那样优雅，我实现了 3 个保管箱中的 2 个，并为您留下了一些工作；）

<html>
<head>
    <script>
var products = [
  {"name":"product1","size":"large","color":"blue","gender":"male"},
  {"name":"product2","size":"small","color":"pink","gender":"female"},
  {"name":"product3","size":"large","color":"green","gender":"male"},
  {"name":"product4","size":"large","color":"yellow","gender":"female"},
  {"name":"product5","size":"medium","color":"blue","gender":"female"},
  {"name":"product6","size":"large","color":"green","gender":"male"},
  {"name":"product7","size":"small","color":"yellow","gender":"male"},
  {"name":"product8","size":"medium","color":"red","gender":"female"},
  {"name":"product9","size":"large","color":"blue","gender":"male"},
  {"name":"product10","size":"small","color":"red","gender":"female"}
];

function checkValidOption(){
    var color_chosen = document.getElementById("color").value;
    var size_chosen = document.getElementById("size").value;
    var result = "";
    //only if both options were chosen 
    if (color_chosen !== "empty" && size_chosen != "empty"){        
        for(var i=0; i<products.length; i++){
            if(products[i].size == size_chosen && products[i].color == color_chosen){
                result = products[i].name;
                break;
            }
        }
        document.getElementById('result').innerHTML = result;
    }    
}

    </script>   
</head>

<body>
    <div id="wrapper">
        <select id="size" name="size" onchange="checkValidOption();">
            <option value="empty"/>         
            <option value="small">small</option>
            <option value="medium">medium</option>
            <option value="large">large</option>
        </select>
        <select id="color" name="color" onchange="checkValidOption();">
            <option value="empty"/>         
            <option value="red">red</option>
            <option value="yellow">yellow</option>
            <option value="blue">blue</option>
            <option value="green">green</option>
            <option value="pink">pink</option>
        </select>
    </div><!--wrapper-->
    <div id="result"></div>

    </body>
</html>

【讨论】：

谢谢，这也有帮助！