JSON多个类别筛选器

我想根据类别标准筛选JSON产品数组。也许解决方案是以不同的方式设置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" 
       } 
      ] 
     } 
    ] 
}

所以，如果我被“红”过滤，它会返回这三个产品。但是，如果按“绿色”或“蓝色”过滤，它只会返回一种产品。我试过$ .grep和$ .map，但是我无法获得多个级别来正确返回产品。任何帮助深表感谢。

我的一个尝试是：

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

    }); 
});

来源

2015-10-05 user2680673

改变'color'到' “颜色”：[“红色”，“绿色”]会简化过滤器，但不是显示挡块。首先显示你一直在尝试的代码。显示你的尝试使它看起来不像你想让别人为你做你的工作 – charlietfl

谢谢charlietfl。我编辑添加一个尝试，我只是在jsfiddle中查看不同的代码。我将尝试使用简化的颜色数组。 – user2680673

好吧...所以你很亲密....更好地学习从头开始稍有不妙从头开始 – charlietfl

坚持使用jQuery $.grep它基本上包装器Array.prototype.filter()

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))

DEMO

编辑：修复您的发布代码。需要回到内阵列充当布尔值，和变化的长度，以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; 
});

FINALLY：

到color:['red', 'green']结构的变化将simplfy到：

testMap = $.grep(myData.products, function(element, index) { 
     return $.inArray('green', element.color) > -1; 
});

来源

2015-10-05 23:57:08 charlietfl

谢谢！我继续玩弄它，并且在$ .map解决方案中嵌入了$ .grep，但是你的更清洁。 – user2680673

在高层次上，你要的是：

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'));

来源

2015-10-05 23:50:25 mooiamaduck

JSON多个类别筛选器

回答

相关问题