9

Galera, queria saber como faço um "select" dentro de um arquivo JSON usando JS.

Exemplo:

Esse é o exemplo

Tenho uma tabela abaixo usando dados vindo de um arquivo JSON, mas queria fazer um filtro para quando clicar em pesquisar, ele soltar na tabela o resultado.

Obs: Eu não manjo muito de frameworks de JS, mas caso for mais fácil, por mim tanto faz.

Como exemplo usem esse JSON:

[
    {
        "id": "1",
        "nome": "Pedro",
        "console": "ps2",
        "preco": "200"
    },
    {
        "id": "2",
        "nome": "Val",
        "console": "ps1",
        "preco": "50"
    },
    {
        "id": "3",
        "nome": null,
        "console": "xbox",
        "preco": "2000"
    },
    {
        "id": "4",
        "nome": "Flavio",
        "console": "one",
        "preco": "1000"
    },
    {
        "id": "5",
        "nome": "Giovanna",
        "console": "xbox98",
        "preco": "300"
    },
    {
        "id": "6",
        "nome": "Luana",
        "console": "xbox",
        "preco": "200"
    },
    {
        "id": "7",
        "nome": "Pri",
        "console": "ps2",
        "preco": "100"
    }
]
1

2 Respostas 2

7

Uma vez que crias a tabela a partir desse JSON o melhor é fazeres cache desses elementos do DOM (<tr>) e associalos ao teu objeto inicial para poderes trabalhar com eles depois.

Ou seja: se juntares a cada um desses objetos uma propriedade, por exemplo DOM, podes depois (sem esforço para o Browser) ir buscar o elemento que queres e escondê-lo caso o filtro não se aplique a ele.

Um exemplo seria:

data.map(function (pessoa) {
    var tr = document.createElement('tr');
    Object.keys(pessoa).forEach(function (valor) {
        var td = document.createElement('td');
        td.innerHTML = pessoa[valor];
        tr.appendChild(td);
    });
    table.appendChild(tr);
    pessoa.DOM = tr;
    return pessoa;
});

Portanto partindo do teu JSON que eu chamei de data, podes mapeá-lo para ter em cada objeto (chamei de pessoa no código) o conteúdo original mais uma nova propriedade pessoa.DOM = tr;.

Assim podes depois filtrar somente o JSON sem ir procurar ao DOM, o que é muito mais eficiente. Depois podes usar classes de CSS para esconder o que não queres:

button.addEventListener('click', function () {
    var prop = select.value;
    var val = input.value;
    data.forEach(function (linha) {
        var valor = linha[prop];
        if (valor && linha[prop].indexOf(val) < 0) linha.DOM.classList.add('esconder');
        else linha.DOM.classList.remove('esconder');
    });
});

Exemplo: http://jsfiddle.net/cjwoumey/

5

Fiz um código simples em JS puro com base no seu form. É bem simples, teria que aprimorar:

Sendo json a variável com o json dos seus dados, select a combo onde os valores são o nome das colunas(propriedades no caso) contidas no json e query o elemento text do seu form. Acesse a demo mais abaixo para entender.

O código do botão que filtra("Pesquisar" no seu caso) os dados:

document.getElementById("filter").onclick = function() {
    var result = json.filter(function(item) {
        return item[select.value] == query.value;
    });
};

Fiddle

A ideia é usar o Array.filter() do javascript.

Outros exemplos com o filtro de string sendo do tipo contains, startsWith e endsWith.

Demo atualizada com o json postado.

Demo atualizada com geração da tabela.

9
  • Dont, seria possível você deixar esses códigos funcionais? Não consegui entender muito bem os exemplos.. Tipo, mostrar o retorno do filtro em uma tabelinha, só para eu conseguir ver o que aconteceu melhor.. 14/09/2015 às 18:24
  • @GiovanniBernini porque nao mete voce um console.log(...) em cada linha para ver o que precisa? ou melhor, porque nao faz por debug e ve o que se passa em cada linha?
    – balexandre
    14/09/2015 às 18:31
  • @GiovanniBernini coloquei uma demo utilizando seus dados, e também essa demo com o código todo comentado. Recomendo abrir o console e ir debugando linha a linha(F10) para entender - já deixei um debugger lá de propósito. 14/09/2015 às 18:31
  • @DontVoteMeDown Eu consegui entender melhor agora o código, mas tenho algumas duvidas, pq o resultado não aparece? Foi intencional? Também não sei como debugar pelo console (Acredito que esse console seja o do navegador, porem não sei como debugar nele), web é meio novo para mim. Vou dar uma pesquisada aqui sobre isso, mas valeu desde já! 14/09/2015 às 19:47
  • 1
    @GiovanniBernini sim, foi intencional. Usei o comando console.log pra exibir os resultados. Pra debugar pelo console, você abre o console com a tecla F12 e depois dá um Run na página. Ao carregar vai parar no breakpoint, que é o comando debugger no código. Depois é só debugar com F10 ou F11, passando o mouse em cima das variáveis para ver os valores. Sempre bom também pesquisar os comandos que você não conhece, sugiro esse site: developer.mozilla.org/pt-BR 14/09/2015 às 20:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .