1

Bom dia, tenho um retorno em JSon assim:

 {
    "dados": [
        {
            "id": "1",
            "nome": "Geraldo",
            "login": "geraldo",
            "nivel": "1",
            "status": "1",
            "email": "geraldo@bol.com.br"
        },
        {
            "id": "2",
            "nome": "Emanuel",
            "login": "manu",
            "nivel": "1",
            "status": "1",
            "email": "manu@webserver.com"
        },
        {
            "id": "22",
            "nome": "Carlos Machado",
            "login": "carlito",
            "nivel": "1",
            "status": "1",
            "email": "carlos@foltechs.com"
        },
        {
            "id": "23",
            "nome": "Lucifer",
            "login": "anjo",
            "nivel": "1",
            "status": "1",
            "email": "lucifer@ceu.com.br"
        },
        {
            "id": "24",
            "nome": "Jeronimo",
            "login": "arvore",
            "nivel": "1",
            "status": "1",
            "email": null
        }
    ]
}

Gostaria de carregar esses dados gerados para uma tabela por exemplo, como segue no código html:

<!DOCTYPE HTML>
<html lang="pt-br">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">        
  <!--jQuery-->
  <script src="https://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
  <!--Script-->
 </head>
 <body>
  <h2></h2>
  <div class="container">           
   <div class="row">
    <div class="col-lg-12" id="WrkArea">

    </div>
   </div>   
   <div class="row">
    <div class="col-lg-12">
     <a class="btn btn-success" id="Carregar">Carregar</a>
    </div>
   </div>   
  </div>
 </body>
 <script type="text/javascript">
  $("#Carregar").click(function() {
   Carregador();
  });



 function Carregador(){
   //variáveis
   let itens = "";
   let url   = "./dados/dados.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
        url: url,
        cache: false,
        dataType: "json",
        beforeSend: function() {
         $("h2").html("Carregando..."); //Carregando
        },
        error: function() {
            $("h2").html("Há algum problema com a fonte de dados");
        },
        success: function(data) {
            //if(retorno[0].erro){
            //    $("h2").html(retorno[0].erro);
            //} else {
                //Laço para criar linhas da tabela
            if(!data) {
             $("#WrkArea").html("Nenhuma informação encontrada...");
            } else {
             itens  = '<table class="table table-bordered odd datatable" style="width: 100%;">';
                itens += '<thead>';
                itens += '<tr>';
                itens += '<th>ID</th>';
                itens += '<th>Nome</th>';
                itens += '<th>Login</th>';
                itens += '<th>email</th>';
                itens += '<th>Nivel</th>';
                itens += '<th>Status</th>';
                itens += '</tr>';
                itens += '</thead>';
                itens += '<tbody>';
                $.each(data, function(item) {
                 itens += "<tr>";
                 itens += "<td>" + item.id + "</td>";
                 itens += "<td>" + item.nome + "</td>";
                 itens += "<td>" + item.login + "</td>";
                 itens += "<td>" + item.email + "</td>";
                 itens += "<td>" + item.nivel + "</td>";
                 //itens += "<td>" + retorno[i].status + "</td>";
                 itens += "<td>&nbsp;</td>";
                 itens += "</tr>"; 
                });
                itens += '</tbody>';
                itens += '</table>';
                //Preencher a Tabela
                $("#WrkArea").html(""+itens+"");                
            }               



            // }
        }
    });
}
</script>   
</html>

O problema que após a execução do código acima, retorna apenas undefined undefined nas colunas, como faço para resolver esse problema? tentei vários posts aqui do fórum e não consegui encontrar uma solução para esse problema.

2
  • O código está mal formatado, tenta corrigir para nos ajudar a entender sua dúvida 5/09/2019 às 13:39
  • Recarreguei p post acredito que esteja ok agora, mesmo sem ter feito nenhuma alteração 5/09/2019 às 13:41

1 Resposta 1

1

Tem dois erros no código:

1) A array é data.dados e não data:

{
    "dados": [...

2) O argumento item no $.each retorna os índices da array e não os valores. O primeiro argumento do $.each são os índices, e o segundo os valores. Você está tentando pegar os valores pelo índice. O correto seria:

$.each(data.dados, function(indice, item) {...
2
  • Interessante, não encontrei essa informação dessa forma, como se escreve os itens no preenchimento dos dados via HTML na saida??? 5/09/2019 às 15:46
  • Se a resposta resolveu, marque ela como certa
    – Meu ovo
    6/09/2019 às 1:37

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 .