1
Good morning, I have a return in Json like this:
{
"dados": [
{
"id": "1",
"nome": "Geraldo",
"login": "geraldo",
"nivel": "1",
"status": "1",
"email": "[email protected]"
},
{
"id": "2",
"nome": "Emanuel",
"login": "manu",
"nivel": "1",
"status": "1",
"email": "[email protected]"
},
{
"id": "22",
"nome": "Carlos Machado",
"login": "carlito",
"nivel": "1",
"status": "1",
"email": "[email protected]"
},
{
"id": "23",
"nome": "Lucifer",
"login": "anjo",
"nivel": "1",
"status": "1",
"email": "[email protected]"
},
{
"id": "24",
"nome": "Jeronimo",
"login": "arvore",
"nivel": "1",
"status": "1",
"email": null
}
]
}
I would like to upload this generated data to a table for example, as follows in html code:
<!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> </td>";
itens += "</tr>";
});
itens += '</tbody>';
itens += '</table>';
//Preencher a Tabela
$("#WrkArea").html(""+itens+"");
}
// }
}
});
}
</script>
</html>
The problem that after executing the above code, returns only Undefined Undefined in the columns, how do I solve this problem? tried several posts here from the forum and could not find a solution to this problem.
The code is badly formatted, tries to fix to help us understand your doubt
– Lucas Emanuel
I reload p post I believe it is ok now, even without making any changes
– Fabio Branco da Silva