Load Json data via Ajax

Asked

Viewed 73 times

0

Guys, how do I load the json data into a table in html? The table is mounted, the script I’m pretty sure is right, to print the data in the table, but I think there’s something missing, sap, maybe a Servlet.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    function carregarclientes() {
        $.getJSON("data.html", function(dados) {
            for (i = 0; i < dados.length; i++) {
                $('#table').append('<tr><td>'
                                    + dados[i].nome + '</td>'
                                    + '<td>' + dados[i].idade + '</td>'
                                    + '<td>' + dados[i].cpf + '</td>'
                                    + '<td>' + dados[i].rg + '</td>'
                                    + '<td>' + dados[i].data_nasc + '</td></tr>'
                                   )
                                }
                            }
                        );
                    }

    // setInterval (carregarclientes, 10000);
</script>
</head>
<body class="container p-5">

    <table id="table" class="table table-bordered">
        <thead class="thead-dark">
            <th>Nome</th>
            <th>Idade</th>
            <th>CPF</th>
            <th>RG</th>
            <th>Data Nasc.</th>
            <th><a onclick="carregarclientes()">Botão</a></th> 
        </thead>


    </table>

</body>
</html>

Here is the JSON

[
    {
        "nome": "Iago Alexandre Kaique Porto",
        "idade": "76",
        "cpf": "649.553.367-52",
        "rg": "13.250.146-6",
        "data_nasc": "04/02/1943"
    },
    {
        "nome": "Kaique Ruan Enzo Moura",
        "idade": "77",
        "cpf": "054.256.298-77",
        "rg": "20.131.497-6",
        "data_nasc": "01/06/1942",
    },
    {
        "nome": "Maya Jessica da Costa",
        "idade": "29",
        "cpf": "397.511.636-68",
        "rg": "47.218.545-7",
        "data_nasc": "13/06/1990"
    },
    {
        "nome": "Nicolas Daniel Caldeira",
        "idade": "77",
        "cpf": "980.704.899-01",
        "rg": "15.717.112-7",
        "data_nasc": "11/02/1942"
    },
    {
        "nome": "Sueli Maria Corte Real",
        "idade": "56",
        "cpf": "930.878.144-74",
        "rg": "20.040.887-2",
        "data_nasc": "20/09/1963"
    },
    {
        "nome": "Clarice Regina Cavalcanti",
        "idade": "75",
        "cpf": "256.299.640-20",
        "rg": "31.806.653-1",
        "data_nasc": "06/03/1944"
    },
    {
        "nome": "Luciana Brenda Cardoso",
        "idade": "69",
        "cpf": "339.164.119-34",
        "rg": "20.988.951-2",
        "data_nasc": "09/12/1950"
    },
    {
        "nome": "Filipe Diego Assis",
        "idade": "59",
        "cpf": "416.733.160-85",
        "rg": "42.349.221-4",
        "data_nasc": "21/07/1960"
    },
    {
        "nome": "Marlene Sonia Catarina Martins",
        "idade": "18",
        "cpf": "853.357.017-14",
        "rg": "36.230.858-5",
        "data_nasc": "03/11/2001"
    },
    {
        "nome": "Victor Roberto Emanuel da Rosa",
        "idade": "22",
        "cpf": "596.474.189-49",
        "rg": "23.776.870-7",
        "data_nasc": "01/03/1997"
    },
    {
        "nome": "Heitor Ryan Campos",
        "idade": "71",
        "cpf": "203.504.654-87",
        "rg": "36.724.345-3",
        "data_nasc": "11/09/1948"
    },
    {
        "nome": "Benjamin Joaquim da Conceicao",
        "idade": "19",
        "cpf": "799.397.210-80",
        "rg": "31.610.379-2",
        "data_nasc": "23/03/2000"
    },
    {
        "nome": "Bruno Thales Caldeira",
        "idade": "34",
        "cpf": "592.149.186-19",
        "rg": "48.743.648-9",
        "data_nasc": "08/07/1985"
    },
    {
        "nome": "Betina Laura Elza Nunes",
        "idade": "36",
        "cpf": "918.480.501-35",
        "rg": "49.367.767-7",
        "data_nasc": "01/08/1983"
    },
    {
        "nome": "Marina Jessica Milena da Rosa",
        "idade": "58",
        "cpf": "207.154.866-32",
        "rg": "40.719.095-8",
        "data_nasc": "25/05/1961"
    },
    {
        "nome": "Fatima Rebeca Farias",
        "idade": "70",
        "cpf": "679.423.117-40",
        "rg": "21.407.260-5",
        "data_nasc": "09/04/1949"
    },
    {
        "nome": "Raul Tomas Gustavo da Mota",
        "idade": "20",
        "cpf": "210.306.484-41",
        "rg": "45.244.984-4",
        "data_nasc": "15/05/1999"
    },
    {
        "nome": "Betina Stefany Vieira",
        "idade": "57",
        "cpf": "802.313.773-55",
        "rg": "26.648.568-6",
        "data_nasc": "18/01/1962"
    },
    {
        "nome": "Anthony Giovanni Enzo Rezende",
        "idade": "47",
        "cpf": "149.523.047-36",
        "rg": "38.593.313-7",
        "data_nasc": "14/02/1972"
    },
    {
        "nome": "Luna Eloa Elisa Vieira",
        "idade": "50",
        "cpf": "217.096.700-10",
        "rg": "45.072.044-5",
        "data_nasc": "17/07/1969"
    }
]

If anyone can help me, I’d really appreciate it

java jquery ajax json servlet

1 answer

0

As you are using Jquery I will leave a solution using the Jquery loop itself and selecting the correct elements.

<script>
    $(function() {

    carregarclientes();

    function carregarclientes() {
        $.getJSON("data.html", function(dados) {
            $(dados).each(function(index) {
                $('#table').append('<tbody><tr><td>' + $(this).nome + '</td>' + '<td>'         + $(this).idade + '</td>' + '<td>' + $(this).cpf + '</td>' + '<td>' + $(this).rg + '</td>' + '<td>' + $(this).data_nasc + '</td></tr></tbody>' )
                 });
            });
    }

    });
</script>

Browser other questions tagged java jquery ajax json servlet

You are not signed in. Login or sign up in order to post.