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

admin 管理员组

文章数量: 1086019

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

• javascript
• jquery
• json

Share Improve this question Follow edited Dec 8, 2010 at 17:54 Nidhi asked Dec 8, 2010 at 17:28 NidhiNidhi 20122 gold badges66 silver badges1313 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

Sorted by: 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; 
});

本文标签： javascriptHow to filter Json data on browserStack Overflow