Как фильтровать данные Json в браузере? - PullRequest
3 голосов
/ 08 декабря 2010

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

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

Опция фильтра

по брендам - ​​Samsung, LG, Sony, JVC, Haier, Bose, Hundayi
Цена прайс-слайдер ценовой диапазон 100 $ - 5000 $
Самые продаваемые -
По размеру - 39 дюймов, 49 дюймов, 72 дюйма

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

Ответы [ 2 ]

3 голосов
/ 08 декабря 2010

Это не очень гибко в нынешнем виде, но что-то подобное может соответствовать вашим потребностям: Рабочий пример

функция фильтра для хранилища данных

// 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 голосов
/ 08 декабря 2010

Попробуйте

// 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; 
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...