如何在瀏覽器上過濾Json數據？

我有一個搜索結果頁面，其中包含已由用戶搜索到的搜索結果，在此頁面中我們還有篩選選項，可以縮小現有搜索的範圍。用戶可以過濾搜索結果（按價格範圍，按品牌，按類別和更多條件）。如果這個數據在瀏覽器中的json對象中可用。我如何根據上面提到的幾個標準過濾json數據。如何在瀏覽器上過濾Json數據？

例如對於用戶搜索液晶電視和所有類型的液晶電視將顯示在搜索頁面上，但用戶可以通過以下選項篩選結果。

濾波器選項

按品牌 - 三星，LG，索尼，JVC，海爾，百色，Hundayi
溴價格 - 價格範圍滑塊$ 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 
       } 
      ] 
    } 
}

來源

2010-12-08 Nidhi

其中正存儲JSON的所有數據△φ你在保留一些全局變量？ – kobe 2010-12-08 17:34:36

數據將保留在一些json文件中。這將被動態創建。 – Nidhi 2010-12-08 17:37:23

這不是因爲它的立場非常靈活，但這樣的事情可能適合你的需求：對於數據存儲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') 
};

來源

2010-12-08 18:54:05 subhaze

嘗試

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

來源

2010-12-08 17:40:06 Ish

如何在瀏覽器上過濾Json數據？

回答

相關問題