úterý 22. října 2013

Jednoduché filtrování seznamů v AngularJS

V našem posledním projektu chceme (čistě v Javascriptu) mít vyhledávací filtr nad seznamem objektů. Asi nějak takhle:

Jenže objekty můžou obsahovat vnořené objekty, které obsahují vnořené objekty s dalšími vnořenými objekty – chápete, kam mířím?
V první verzi jsme si hráli s rekurzí, procházeli properties objektu, přeskakovali funkce atd. atd. 
Ne že by to nefungovalo, ale je to spousta kódu, který se špatně čte, určitě je v něm nějaká chyba a jistě se už našel někdo, kdo to napsal líp.

No jasně – a byl to ten chlápek co psal JSON.stringify()!

Když se postavíme na ramena obrů a použijeme JSON (a Underscore.JS), tak se s vyhledáváním dostaneme na 5 řádek jednoduchého kódu.

Když přidáme vyhledávání podle více klíčových slov, validace vstupů a možnost ignorovat některé properties objektu, tak jsme pořád na 22. řádcích:


Řídíme se zásadou, že jedno demo řekne víc než tisíc slov. Hezké hraní.

A kdyby náhodou, tak zbytek kódu je na Githubu.

1 komentář:

  1. Nazdár Lukáši!

    Angular sice neznám, ani filtrování momentálně neřeším, ale můžu potvrdit, že CoffeeScript a underscore.js jsou parádičky, bez kterých by se mi v Javascriptu už moc dělat nechtělo. Obé úspěšně používáme v Energomonitoru (v nově chystané verzi ještě v doprovodu D3.js a backbone.js) a zatím jakože dobré.

    Maj sa

    OdpovědětVymazat