如何在浏览器上过滤Json数据？

Question

我有一个搜索结果页面，其中包含搜索结果已经由用户搜索，在这个页面上，我们也有过滤选项，可以缩小现有的搜索，例如，用户可以过滤搜索结果(按价格范围，按品牌，按类别和一些更多的标准)。如果此数据在浏览器上的json对象中可用。如何根据上面提到的几个条件来过滤json数据。

例如，用户搜索液晶电视和所有类型的液晶电视将显示在搜索页面上，但用户可以通过以下选项过滤掉结果。

过滤器选项

按品牌-三星、LG、索尼、JVC、海尔、Bose、Hundayi

Br Price-价格范围滑块100$ - 5000$

最畅销的-

按尺寸-39英寸、49英寸、72英寸

这里是json数据示例

{ 
"productList" : { 
          "product details" : [ 
                {
                    "brand":"Lg",
                    "productname":"Microwave",
                    "price":200
                },
                {
                    "brand":"Samsung",
                    "productname":"Digi cam",
                    "price":120
                },
                {
                    "brand":"Sony",
                    "productname":"Lcd TV",
                    "price":3000
                },
                {
                    "brand":"LG",
                    "productname":"Flat TV",
                    "price":299
                }
                ,
                {
                    "brand":"Samsung",
                    "productname":"Lcd TV",
                    "price":700
                },
                {
                    "brand":"LG",
                    "productname":"Plasma TV",
                    "price":3000
                },
                {
                    "brand":"sony",
                    "productname":"Plasma TV",
                    "price":12929
                }
           ]
    }
}

Answer 1

这并不是很灵活，但像这样的东西可能会满足您的需求：

数据存储的过滤函数

// dataStore = JSON object, filter = filter obj
function filterStore(dataStore, filter) {
    return $(dataStore).filter(function(index, item) {
        for( var i in filter ) {
           if( ! item[i].toString().match( filter[i] ) ) return null;
        }
        return item;
    });
}

用法

// result contains array of objects based on the filter object applied
var result = filterStore( store, filter);

我所拥有的数据存储

var store = [
    {"brand": "Lg",
    "productname": "Microwave",
    "price": 200},

    {"brand": "Samsung",
    "productname": "Digi cam",
    "price": 120},

    {"brand": "Sony",
    "productname": "Lcd TV",
    "price": 3000},

    { "brand": "LG",
    "productname": "Flat TV",
    "price": 299},

    {"brand": "Samsung",
    "productname": "Lcd TV",
    "price": 700},

    {"brand": "LG",
    "productname": "Plasma TV",
    "price": 3000},

    {"brand": "sony",
    "productname": "Plasma TV",
    "price": 12929}
];

过滤我使用的对象

// RegExp used could most likely be improved, definitely not a strong point of mine :P
var filter = {
    "brand": new RegExp('(.*?)', 'gi'),
    "productname": new RegExp('(.*?)', 'gi'),
    "price": new RegExp('299', 'gi')
};

var filter2 = {
    "brand": new RegExp('LG', 'gi'),
    "productname": new RegExp('(.*?)', 'gi'),
    "price": new RegExp('(.*?)', 'gi')
};

var filter3 = {
    "brand": new RegExp('Samsung', 'gi'),
    "productname": new RegExp('(.*?)', 'gi'),
    "price": new RegExp('(.*?)', 'gi')
};

var filter4 = {
    "brand": new RegExp('(.*?)', 'gi'),
    "productname": new RegExp('Plasma TV', 'gi'),
    "price": new RegExp('(.*?)', 'gi')
};

Answer 2

试一试

// jsonData = [{"brand": "LG"}, {"brand": "Samsung"}]
jsonData.sort(brand);
// render the grid html again

编辑

// you dont require sorting then
var dataBrand = Array();
$.each(jsonData, function() {
    if(this.brand=="LG") dataBrand[this.brand] = this; 
});