Фильтр нескольких категорий JSON

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" 
       } 
      ] 
     } 
    ] 
} 

Так что, если я фильтрация по «красной», он будет возвращать все три продукта. Но если фильтрация «зеленым» или «синим», она будет возвращать только один продукт. Я пробовал $ .grep и $ .map, но я не могу получить несколько уровней для правильного возврата продуктов. Буду признателен за любую оказанную помощь.

Один из моих попыток был:

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

    }); 
}); 

Answer 1

Придерживание с помощью 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

EDIT: Исправьте свой код. Необходимо, чтобы вернуть длину внутреннего массива, который действует как логическое значение, и изменения в 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; 
}); 

Answer 2

На высоком уровне, что вы хотите:

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