2010-12-08 3 views
3

У меня есть страница с результатами поиска, которая содержит результат поиска, уже выполненный пользователем. На этой странице также есть опция фильтра, которая может сузить существующий поиск, например. пользователь может фильтровать результаты поиска (по ценовому диапазону, по марке, по категориям и другим критериям). Если эти данные доступны в json-объекте в браузере. Как я могу фильтровать данные json на основе нескольких критериев, как указано выше.Как фильтровать данные Json в браузере?

Для примера Поиск пользователей для ЖК-телевизоров, и все типы ЖК-телевизоров будут отображаться на странице поиска, но пользователь может отфильтровать результат по следующей опции.

вариант фильтра

По марке - Samsung, LG, Sony, JVC, Haier, Bose, Hundayi
Br Прайс Цена слайдера диапазон 100 $ - 5000 $
Большинство Selling-
По размерно 39inch , 49 дюймов, 72inch

здесь 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 
       } 
      ] 
    } 
} 
+0

, где хранятся все данные ?? JSON вы держите в некоторой глобальной переменной? – kobe 2010-12-08 17:34:36

+0

Данные останутся в некотором json-файле. который будет создан динамически. – Nidhi 2010-12-08 17:37:23

ответ

3

Это не очень гибким, как он стоит, но что-то подобное может соответствовать вашим потребностям: функция Working Example

фильтр для хранения данных

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

Попробуйте

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