Question

我想根据类别标准过滤JSON产品数组。也许解决方案是以不同方式设置JSON，但我不确定JSON会是什么样子。这是我目前的JSON：

var myData = {
    "products": [
        {
            "name": "Multi Color 1",
            "price": "2.99",
            "color": [
                {
                    "type": "red"
                },
                {
                    "type": "blue"
                }
            ]
        },
        {
            "name": "Multi Color 2",
            "price": "2.99",
            "color": [
                {
                    "type": "red"
                },
                {
                    "type": "green"
                }
            ]
        },
        {
            "name": "Single Color",
            "price": "2.99",
            "color": [
                {
                    "type": "red"
                }
            ]
        }
    ]
}

因此，如果我使用＆＃39; red＆＃39;过滤，则会返回所有三种产品。但如果过滤绿色＆＃39;或者＆＃39; blue＆＃39;它只会返回一种产品。我尝试过$ .grep和$ .map，但我无法获得多个级别来正确返回产品。非常感谢任何帮助。

我的一次尝试是：

testMap = $.grep(myData.products, function(element, index) {
    return $.grep(element.color, function( element, index ) {
        return (element.value === "green");

    });
});

Answer 1

在高层次上，你想要的是：

filteredData = grep(myData, function(item) {
  return any(item.color, function(color) {
    return color.type === myColor;
  });
});

其中any是一个函数，它告诉您数组中的任何项是否满足某个谓词。 AFAIK jQuery没有开箱即用的功能，但写一个很容易。

转换为纯JavaScript，整个过程涉及几个嵌套循环：

var filterMyData = function(data, color) {
  var result = [];
  var products = data.products;
  for(var i = 0, n = products.length; i < n; ++i) {
    var product = products[i];
    var colors = product.color;
    for(var j = 0, m = colors.length; j < m; ++j) {
      if(colors[j].type === color) {
        result.push(products);
        break;
      }
    }
  }
  return result;
};

console.log(filterMyData(myData, 'red'));

Answer 2

坚持使用jQuery $ stack clean $ stack build --ghc-options=-ddump-minimal-imports stack-0.1.5.0: configure Configuring stack-0.1.5.0... stack-0.1.5.0: build Preprocessing library stack-0.1.5.0... [ 1 of 69] Compiling Data.Set.Monad ( src/Data/Set/Monad.hs, .stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Data/Set/Monad.o ) [ 2 of 69] Compiling Data.Attoparsec.Combinators ( src/Data/Attoparsec/Combinators.hs, .stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Data/Attoparsec/Combinators.o ) [ 3 of 69] Compiling Network.HTTP.Download.Verified ( src/Network/HTTP/Download/Verified.hs, .stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Network/HTTP/Download/Verified.o ) ^Cuser interrupt $ find . -name '*imports*' ./.stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Data.Attoparsec.Combinators.imports ./.stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Data.Set.Monad.imports ./.stack-work/dist/x86_64-osx/Cabal-1.22.4.0/build/Network.HTTP.Download.Verified.imports，它基本上是$.grep

的包装器

Array.prototype.filter()

的 DEMO

编辑：修复已发布的代码。需要返回充当布尔值的内部数组的长度，并更改为function filterByColor(colorSearch, arr){ return $.grep(arr,function(item){ return $.grep(item.color,function(col){ return col.type === colorSearch }).length; }); } console.log(filterByColor('red',myData.products))

element.type

最后：

对testMap = $.grep(myData.products, function(element, index) { return $.grep(element.color, function( element, index ) { // check the `type` return (element.type === "green"); // return the length , zero means no match and is falsy }).length; });结构的更改将简化为：

color:['red', 'green']

JSON多类别过滤器

2 个答案: