最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to filter Json data on browser? - Stack Overflow

programmeradmin1浏览0评论

I am having a search result page which contain search result already searched by user ,In this page we also have filter option which can narrow down the existing search for e.g. user can filter the search result (By Price range , By Brand , By Category and some more criteria). If this data is available in json object on browser. How I can filter the json data based on few criteria as stated above.

For e.g User search for LCD TV and all type of LCD TV will show on search page but user can filter out the result by following option.

Filter option

By Brand - Samsung, LG, Sony, JVC , Haier, Bose, Hundayi
Br Price- Price range slider 100$ - 5000$
Most Selling-
By Size- 39inch, 49 inch, 72inch

here json data sample

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

I am having a search result page which contain search result already searched by user ,In this page we also have filter option which can narrow down the existing search for e.g. user can filter the search result (By Price range , By Brand , By Category and some more criteria). If this data is available in json object on browser. How I can filter the json data based on few criteria as stated above.

For e.g User search for LCD TV and all type of LCD TV will show on search page but user can filter out the result by following option.

Filter option

By Brand - Samsung, LG, Sony, JVC , Haier, Bose, Hundayi
Br Price- Price range slider 100$ - 5000$
Most Selling-
By Size- 39inch, 49 inch, 72inch

here json data sample

{ 
"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
                }
           ]
    }
}
Share Improve this question edited Dec 8, 2010 at 17:54 Nidhi asked Dec 8, 2010 at 17:28 NidhiNidhi 2012 gold badges6 silver badges13 bronze badges 2
  • where are storing all the data of json ?? you are keeping in some global variable ? – kobe Commented Dec 8, 2010 at 17:34
  • Data will remain in some json file. which will be created dynamically. – Nidhi Commented Dec 8, 2010 at 17:37
Add a ment  | 

2 Answers 2

Reset to default 3

This isn't very flexible as it stands but something like this might fit your needs: Working Example

filter function for data store

// 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;
    });
}

usage

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

data store as I have it

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

filter objects I used

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

Try

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

EDIT

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

评论列表(0)

  1. 暂无评论