Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Dúvida em como pegar os valores do JSON gerado

Galera, tudo bem ? Ficaria muito grato se alguém conseguisse me ajudar. Estou fazendo meu TCC e agora resolvi colocar jQuery e utilizar o AJAX do meu servidor que é feito em JAVA.

Porém, estou tendo um problema. No meu servidor, eu consigo retornar o array de objetos JSON, mas quando eu tento acessar o valor dele, quando eu dou um console.log, ele retorna undefined.

Vou colocar as classes abaixo para terem uma idéia.

ControleUsuario.java

public void consultarUsuarioAJAX(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, ClassNotFoundException, SQLException {

        UsuarioDAO daoUsuario = new UsuarioDAO();

        List<Usuario> listaUsuarios = daoUsuario.consultarTodosUsuarios();

        Gson gson = new GsonBuilder()
                .addSerializationExclusionStrategy(new Endereco.ExclusaoUsuarioDoEndereco())
                .create();

        String listaUsuarioJSON = gson.toJson(listaUsuarios);

        resp.getWriter().println(listaUsuarioJSON);
        System.out.println(listaUsuarioJSON);


    }
usuario.js - Arquivo JavaScript

$(function(){
    consultarUsuarioAJAX();
});

function consultarUsuarioAJAX(){
    $.get("http://localhost:8084/PCMAKER/consultarUsuarioAJAX",exibeUsuarios)

            .fail(function(){
                console.log("Erro");
    });
}

function exibeUsuarios(data){

    var corpoTabela = $(".tabela-usuario").find("tbody");

    var objJSON = {
        dadosUsuario: data
    };

      console.log(objJSON.dadosUsuario.idUsuario);
    $.each(objJSON,function(){


        var tr = $("<tr>");
        var colunaIdUsuario = $("<td>").text(this.idUsuario);
        var colunaNomeUsuario = $("<td>").text(this.nomeCompleto);
        var colunaLogin = $("<td>").text(this.login);
        var colunaEmail = $("<td>").text(this.email);
        var colunaCpf = $("<td>").text(this.cpf);
        var colunaRg = $("<td>").text(this.rg);
        var colunaDeletar = $("<td>");
        var colunaAlterar = $("<td>").text("Alterar");

        var linkExcluir = $("<a>").attr("href","deletarUsuario?id="+this.id).text("Excluir");
        var linkAlterar = $("<a>").attr("href","alterarUsuario?id="+this.id).text("Alterar");

        //Colocando links de Excluir e Alterar dentro do TD
        colunaDeletar.append(linkExcluir);
        colunaAlterar.append(linkAlterar);

        //Colocando os TD's na TR's
        tr.append(colunaIdUsuario);
        tr.append(colunaNomeUsuario);
        tr.append(colunaLogin);
        tr.append(colunaEmail);
        tr.append(colunaCpf);
        tr.append(colunaRg);


        corpoTabela.append(tr);


        });        

    }

Eu ainda estou pegando somente os valores dentro de um único objeto. Depois terei que pegar os valores dentro outro array de objetos, dentro desse JSON gerado com os valores de usuário. Se alguém puder me dar uma ajuda, eu ficaria grato :D

6 respostas

Acho que você esta se confundindo na estrutura do json resultante.

Tenta a instrução abaixo pra ver se mostra algo no console.

console.log(objJSON.dadosUsuario);

Se mostrou, cola aqui.

Outra coisa é que eu acho que os seletores estão errados.

//ta assim. Isso funciona?
$("<tr>");

//não deveria ser assim?
$("tr");

Os seletores estão sendo criados certo...

Eu dei um console.log(objJSON.dadosUsuario) dentro do forEach() e fora dele e ambos estão imprimindo meu objeto JSON. Quando eu tento acessar por exemplo: objJSON.nomeCompleto (nome dado no servidor) ele me retorna undefined.

$(function(){
    consultarUsuarioAJAX();
});

function consultarUsuarioAJAX(){
    $.get("http://localhost:8084/PCMAKER/consultarUsuarioAJAX",exibeUsuarios)

            .fail(function(){
                console.log("Erro");
    });
}

function exibeUsuarios(data){

    var corpoTabela = $(".tabela-usuario").find("tbody");

    var objJSON = {
        dadosUsuario: data
    };

console.log(objJSON.dadosUsuario);

//Imprime [{"idUsuario":2,"nomeCompleto":"Administrador","login":"administrador","senha":"c5148c1f","email":"adm@gmail.com","tipoAdm":"ADMINISTRADOR","cpf":"87654321","rg":"12345678","telefone":"11963831321","enderecos":[{"idEndereco":2,"cep":"08710640","rua":"Rua Teste","bairro":"Cedsa","uf":"da","numero":123,"cidade":"Mogi das Cruzes","complemento":"das"}]},{"idUsuario":3,"nomeCompleto":"Leonardo Lopes Silva","login":"leonardoLopes","senha":"c5148c1f","email":"leo_lopes09@hotmail.com","tipoAdm":"CLIENTE","cpf":"46974274831","rg":"414393703","telefone":"11963831321","enderecos":[{"idEndereco":3,"cep":"08710640","rua":"Rua Manoel Pimenta de Abreu","bairro":"Centro","uf":"SP","numero":116,"cidade":"Mogi das Cruzes","complemento":"AP. 21 Bloco A"}]},{"idUsuario":5,"nomeCompleto":"Renato","login":"renato","senha":"123456","email":"renatoceadareanu@gmail.com","tipoAdm":"CLIENTE","cpf":"888888888","rg":"2222222","telefone":"11888888888","enderecos":[{"idEndereco":5,"cep":"08555555","rua":"asdasd","bairro":"asdad","uf":"sp","numero":1231,"cidade":"asdasd","complemento":"asdad"}]}]

      console.log(objJSON.dadosUsuario.idUsuario);
    $.each(objJSON,function(){


        var tr = $("<tr>");
        var colunaIdUsuario = $("<td>").text(this.idUsuario);
        var colunaNomeUsuario = $("<td>").text(this.nomeCompleto);
        var colunaLogin = $("<td>").text(this.login);
        var colunaEmail = $("<td>").text(this.email);
        var colunaCpf = $("<td>").text(this.cpf);
        var colunaRg = $("<td>").text(this.rg);
        var colunaDeletar = $("<td>");
        var colunaAlterar = $("<td>").text("Alterar");

        var linkExcluir = $("<a>").attr("href","deletarUsuario?id="+this.id).text("Excluir");
        var linkAlterar = $("<a>").attr("href","alterarUsuario?id="+this.id).text("Alterar");

        //Colocando links de Excluir e Alterar dentro do TD
        colunaDeletar.append(linkExcluir);
        colunaAlterar.append(linkAlterar);

        //Colocando os TD's na TR's
        tr.append(colunaIdUsuario);
        tr.append(colunaNomeUsuario);
        tr.append(colunaLogin);
        tr.append(colunaEmail);
        tr.append(colunaCpf);
        tr.append(colunaRg);


        corpoTabela.append(tr);


        });        


    }

Mano, você ta dando uma confundida o que é uma array e o que é um objeto.

Pelo que você passou ai o objeto

objJSON.dadosUsuario

é uma array, ou seja, para acessa um elemento dela devemos acessa uma posição especifica, por exemplo

objJSON.dadosUsuario[0]

Para obter o id do usuário da posição 0 chamados entao

objJSON.dadosUsuario[0].idUsuario

No seu codigo você da chamando a função each do jQuery para percorrer uma array, porém ta passando um objeto para ela

 $.each(objJSON,function(){

Você deveria passar para ela seria a array da dados de usuario

 $.each(objJSON.dadosUsuario,function(){

Notei mais uma coisa tambem, você esta acessando o elemento


        var linkExcluir = $("<a>").attr("href","deletarUsuario?id="+this.id).text("Excluir");
        var linkAlterar = $("<a>").attr("href","alterarUsuario?id="+this.id).text("Alterar");
this.id

Mas no JSON que passou ali comentado não existem ele campo id, nao deveria ser idUsuario?

       var linkExcluir = $("<a>").attr("href","deletarUsuario?id="+this.idUsuario).text("Excluir");
        var linkAlterar = $("<a>").attr("href","alterarUsuario?id="+this.idUsuario).text("Alterar");

Uma dica se tiver problema com o json logado no console, pega um formater de json ai na net para te auxiliar, exemplo:

https://jsonformatter.curiousconcept.com/

Espero ter ajudado.

Obrigado pela atenção. Não estou acostumado a trabalhar com JSON. Estou aprendendo agora e pegando os macetes.

Enfim... quando eu dei console.log(objJSON.dadosUsuario[0].idUsuario), ele ainda me retorna undefined. E quando eu dou console.log(objJSON.dadosUsuario), ele me retorna o JSON certinho. Fui no link que você me passou pra verificar se o JSON estava vindo corretamente, e o JSON está válido, segundo o site. Sinceramente eu não sei o que está acontecendo.

solução!

Estou achando que esse seu JSON ainda esta em formato string .

Faz o seguinte, logo abaixo de:

function exibeUsuarios(data){

Coloque o seguinte codigo

console.log(typeof(data));

Da uma olhada no seu console, se o resultado encontrado for "string", encontramos o problema. O que falta seria converter essa string em um JSON de verdade para isso precisamos do seguinte metodo:

var dataJSON = JSON.parse(data);

Depois precisas trocar sua implementação (ou até remover sua declaração e utilizar direto o dataJSON)

  var objJSON = {
        dadosUsuario: dataJSON
    };

Me aviso do resultado.

Obrigado Henrique Maich. Só consegui tempo para testar agora e o que estava realmente acontecendo era o que você suspeitou primeiro. O servidor estava devolvendo uma String com o formato JSON e no JS, ele estava sendo reconhecido como uma String comum e não como um objeto JSON. Acredito que agora para poder acessar o arrayList de objetos Enderecos dentro de usuario, terei de fazer algo como:

var objJSON = JSON.parse(data);
objJSON[index].enderecos[index].propriedade;

Agradeço muito pela atenção e desculpe qualquer incômodo.