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多個類別篩選器

回答

相關問題