Usando o yLexObj() para filtrar dados em um vetor

Digamos que tem uma lista de valores em um vetor grande em JS.

Não seria bom poder filtrar os dados de forma genérica escrevendo a condicional em uma string e sem ter que usar o eval() do javascript?

O código abaixo é um exemplo do que pode fazer usando o yloader.js

list=[ { age: 13, name: "David" }, { age: 40, name: "Ann"} , { age: 6, name: "Laura"} , { age: 15, name: "Mark"}, { age: 51, name: "John"} ];
var filter=yLexObj("age<18");
for(var person=0; person<list.length; person++) { 
    if (filter.solve(list[person])) 
        console.log(list[person]) 
}

Evitar o eval() do javascript é uma questão de segurança básica. Então um parser simples associado com um analisador léxico lhe dão a suficiente potência como para poder construir aplicativos mais simples.

Os dados deste pequeno programa, por exemplo, você pode te-los obtido por uma requisição xmlHttpRequest (usando o ycomm.invoke() ) ou uma requisção RESTful (usando ycomm.crave() )

O filtro pode ser fruto de uma pesquisa feita com um input em que o usuário filtra os dados obtidos do servidor localmente (ou seja, sem consultar o servidor). Isso é fantástico para aplicativos embarcados ou para limitar ou diminuir a carga das consultas ao servidor.

Um exemplo um pouco mais avançado pode ser um aplicativo cordova em que uma lista de produtos é obtida do servidor e depois ela é consultada offline, como no código logo abaixo:

<script src="js/yloader.js"></script>
<script src="js/ystorage.js"></script>
<script src="js/dados-testes.js"></script>

<body>
 <h1>Teste de yInfoObj.filter()</h1>
 <input type=text id='filtro' value="Name like '%Chocolate%'" size=80><input type=button value='Filtrar' id="btnFiltrar">
 <table id="tbl_resultado"></table>
</body>

<script>
 /* esta rotina se encarrega de mostrar item a item o resultado da pesquisa */
 function mostrarItem(a) {
 var tbl=y$('tbl_resultado');
 var r=tbl.insertRow(-1), c1=r.insertCell(-1), c2=r.insertCell(-1);
 c1.innerHTML="<td>{0}</td>".format(a.BARCODE);
 c2.innerHTML="<td>{0}<div><b>{1}</b></div></td>".format(a.BrandName, a.Name);
 }

 /* esta funcao resulta chamada quando a pesquisa finaliza */
 function fimDoFiltro() {
 alert("fim da pesquisa");
 }

 /* funcao associada ao click do botao 'btnFiltrar' */
 function filtrarDados() {
 var filtro=y$('filtro').value;
 var tbl=y$('tbl_resultado');
 while (tbl.rows.length>0)
 tbl.deleteRow(0);
 dados.filter(mostrarItem, fimDoFiltro, filtro);
 }

 /* variavel global com o atalho para os dados */
 var dados;

 addOnLoadManager(
 function() {
 /* crio um objeto de dados desconectado do mundo exterior */
 dados = yInfoObj("", "dados", "BARCODE");

 bandeira = ystorage.getItem("bandeira") || { inicializado: false};
 /* insiro nele os dados de testes (na segunda rodada estão lá já que persistem) */
 if (!bandeira.inicializado) {
 console.log("Carregando os dados..");
 dados.insertData(dados_testes);
 console.log("Pronto!");
 bandeira.inicializado=true;
 ystorage.setItem("bandeira", bandeira);
 
 }
 
 /* associo o botao com o gestor do evento */
 addEvent("btnFiltrar", "click", filtrarDados)
 });

</script>

Os dados foram gerados usando os dados da https://www.datakick.org e você pode ver ele trabalhando aqui: http://yeapf.com/samples/yInfoObj ou pode baixar o exemplo daqui: http://yeapf.com/samples/yInfoObj.zip

Lembre que, ao observar o exemplo, todos os dados estão vindo na carga da página então desconte isso da sua apreciação, já que se espera que esses dados cheguem ao seu aplicativo paulatinamente ou de forma mais apurada.