3

Estou fazendo uma requisição em um Web Service usando jQuery desta forma:

var dados = jQuery( this ).serialize();

jQuery.ajax({
     type: "POST",
     url: "http://meusite.com/test",
     data: dados,
     success: function( data )
     {
         // quero exibir os dados que estão dentro de data
      }
});

O JSON de retorno é exatamente esse quando o login do usuário está ERRADO.

{
    "error": true,
    "message": "Login failed. Incorrect credentials"
}

Caso a autenticação esteja CORRETA, o resultado é esse:

{
    "error": false,
    "user": [
        {
            "id": 2,
            "fullname": "Romero Brito",
            "email": "[email protected]",
            "created_at": "2017-01-20 01:03:48"
        }
    ]
}

Como faço para extrair arrays e objetos do JSON retornado com jQuery? Como eu faço para exibir a mensagem que está dentro de message e os através do data?

EDIT

A princípio pode ser listado os dado simplesmente em um alert() ou até mesmo somente no console.log().

5
  • Onde queres mostrar esses dados? numa tabela? num alert?
    – Sergio
    Commented 20/01/2017 às 5:40
  • Você quer obter a propriedade user?
    – Marconi
    Commented 20/01/2017 às 11:07
  • @Sergio a princípio não teria um local específico, somente em log ou até mesmo num alert().
    – viana
    Commented 20/01/2017 às 11:13
  • @Marconi quero obter os elementos retornados do JSON de dentro do data. Não somente o user, porém outros objetos.
    – viana
    Commented 20/01/2017 às 11:15
  • @AckLay Seria percorrer as propriedades sem saber o que vem? Mais ou menos isso? pt.stackoverflow.com/questions/127924/…
    – Marconi
    Commented 20/01/2017 às 11:50

2 Respostas 2

1

Boa noite,

se você especificar no objeto de opções enviado ao método .ajax a key dataType, você informa qual tipo de dado você está esperando do servidor. No seu caso, seria algo assim:

jQuery.ajax({
     /* ... */
     dataType: 'json',
     /*... */
})

Contudo, como padrão (default), o jQuery tenta adivinhar - Intelligent Guess -, o formato do dado recebido (xml, script, json...) a partir da resposta do servidor. Então este parâmetro acima só precisaria ser informado caso o jQuery não conseguisse entender que a resposta se trata de um JSON (normalmente ocorre por culpa de uma mensagem mal formatada pelo servidor), ou você quer se certificar que o resultado será sempre esse (neste caso, se o jQuery não conseguir fazer o parse, ele irá invocar o callback error).

Dito isto, então, a sua função-callback success será invocada com o primeiro parâmetro contendo o dado formatado (parsed) (no seu caso, um objeto JavaScript). E você pode manipulá-lo como se estivesse manipulando um objeto JavaScript normalmente. Algo assim:

jQuery.ajax({
    /* ... */ 
    success: function(data, textStatus, jqXHR )
     {
         /* seu dado já deve estar no parâmetro data */
         console.log("Login com sucesso? ", !data.error);
         if (!data.error) {
            var user = data.user[0]; //seu user é um array, então pego o primeiro elemento dessa array, por exemplo
            console.log("Nome completo do usuário: ", user.fullname);
         }
     }
});

O código acima é apenas para fins de debug, pois irá escrever no console do navegador.

Não sei se foi esta sua dúvida (sobre como manipular o dado recebido).

Se você quiser exibir uma mensagem simples, pode chamar o método alert. Isto irá mostrar uma caixa de diálogo com a mensagem (bem simples).

Ou, se você quiser inserir esta mensagem no corpo da página de alguma forma, ou fazer interações de elementos, isto envolve manipulações no DOM, e pode ser feito facilmente pelo jQuery. Um exemplo bem simples:

jQuery.ajax({
    /* ... */ 
    success: function(data, textStatus, jqXHR )
    {
        var textMessage;
        if (data.error) {
            textMessage = "Ocorreu um erro ao relizar o login: " + data.message;
        } else {
            textMessage = "Login realizado com sucesso! Bem vindo, " + data.user[0].fullname + "!";
        }
        $("body").append( $("<p></p>", { text: textMessage }) );
    }
});

O exemplo acima apenas adiciona ao <body> um <p> (parágrafo) com uma mensagem.

7
  • Legal sua explicação, mas não funfou cara. Tentei mostrar a parte da mensagem, porém aparece que data.message está undefined
    – viana
    Commented 20/01/2017 às 11:26
  • @AckLay corrigi o último exemplo. Estava com a lógica invertida.
    – luiscrjr
    Commented 20/01/2017 às 12:15
  • @AckLay era ali que estava dando o erro? o primeiro exemplo funcionou como você esperava?
    – luiscrjr
    Commented 20/01/2017 às 12:37
  • O data.message funcinou de boa, porém o data.user[0].fullname não funciona.
    – viana
    Commented 20/01/2017 às 13:13
  • Você pode fazer um console.log(data); e inspecionar seu objeto. Pode postar aqui o resultado? você postou lá em cima que a chave user recebe uma array. Então essa seria a forma de acessar aquele objeto. data.user[0] obtém o primeiro item da array data.user
    – luiscrjr
    Commented 20/01/2017 às 13:20
1

Usando dataType como json é possível obter o retorno nesse formato para iterar as chaves ou valores.

jQuery.ajax({
  type: "GET",
  url: "https://raw.githubusercontent.com/luccascosta/library/master/js/ret.json",
  dataType: "json",
  success: function(data) {
    console.log(data);
    console.log(data['message']);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Para o retorno de usuário

jQuery.ajax({
  type: "GET",
  url: "https://raw.githubusercontent.com/luccascosta/library/master/js/user.json",
  dataType: "json",
  success: function(data) {
    console.log(data);
    console.log(data.user[0].fullname); // user[0] é para acessar o index zero do array de user. Dessa forma é possível acessar qualquer propriedade do objeto dentro desse array
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

PS: No exemplo está método get somente para ilustrar o retorno.

2
  • Isso funcionam para o message. E para o caso de user, como tem que ser feito? Desculpe a ignorância.
    – viana
    Commented 20/01/2017 às 13:15
  • Nenhuma ignorância. Editei a resposta @AckLay.
    – BrTkCa
    Commented 20/01/2017 às 13:22

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 .