2010-12-08 9 views
3

Ich habe eine Suchergebnisseite, die Suchergebnis bereits vom Benutzer gesucht enthalten, Auf dieser Seite haben wir auch Filter-Option, die die bestehende Suche nach z. Benutzer kann das Suchergebnis filtern (Nach Preisbereich, Nach Marke, Nach Kategorie und einigen weiteren Kriterien). Wenn diese Daten im JSON-Objekt im Browser verfügbar sind. Wie kann ich die JSON-Daten anhand weniger Kriterien wie oben angegeben filtern?Wie filtert man Json-Daten im Browser?

Für z. B. Benutzer suchen nach LCD-TV und alle Arten von LCD-TV wird auf der Suchseite angezeigt, aber Benutzer können das Ergebnis durch folgende Option herausfiltern.

Filteroption

Nach Marke - Samsung, LG, Sony, JVC, Haier, Bose, Hundayi
Br Preis- Preisbereich Schieber $ 100 - $ 5000
meisten verkaufendes
von Size- 39inch 49, Zoll, 72inch

hier json Datenabtastwert

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

wo alle Daten von json sind Speichern ?? Sie behalten eine globale Variable? – kobe

+0

Daten bleiben in einer JSON-Datei. welches dynamisch erstellt wird. – Nidhi

Antwort

3

Dies ist nicht sehr flexibel, wie es steht aber so etwas wie dies könnte Ihre Bedürfnisse anzupassen: Working Example

Filterfunktion für Datenspeicher

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

Verwendung

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

Datenspeicher, wie ich habe es

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

Filterobjekte I

verwendet
// 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

Versuchen

// 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

Wenn Benutzer nur nach LG suchen, indem Sie sortieren, wie ich die Daten erhalten kann, wo die Marke nur LG ist? Kannst du ein Beispiel geben? – Nidhi

+0

Wie wäre es mit diesem Schatz: D http://goessner.net/articles/JsonPath/ – Nidhi