Show json output on jquery and html screen

Asked

Viewed 350 times

0

I have a question on how to show the data of a json return, on the screen using html,javascript and jquery. Inside a jsp file.

Follow my javascript page:

  function getAvaliacao(){

                appAjax.genericRequestJSON('/ajax/docAux/avaliacao.json', function (json) {

                    $(json).each(function (i, documento) {

                    })
                });                            

            }

Within "document", I have the following database fields.

procedure, in a question, questao_desc, alt_resp, res_desc, highright

I need to present them on the screen in the form of a proof for the user in this way:

Procedure

num_questao - questao_desc

alt_resp - res_desc

alt_resp - res_desc

alt_resp - res_desc

alt_resp - res_desc

Ex:

Test manual

1 - You are in favor of abortion?

A - Yes

B - Nao

C - Maybe

D - I don’t know

E - No opinion

2 - You are in favor of legalizing marijuana?

A - Yes

B - Nao

C - Maybe

D - I don’t know

E - No opinion

3 - etc....

Where the user would choose which question he would find correct.

I don’t know much about html and javascript, so I’m struggling to do this basic and would like help.

javascript html jquery json

2 answers

2


You can solve your problem in many different ways, one way simple is to use a table.
With javascript you can assemble this table and use innerHTML and insert it later in the page.

I created this code below to illustrate how you can do, only save with extension . html and open in the browser for you to test. Then just change it according to your needs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="containerTabela">

    </div>
    
    <script>
        const documento = {
            "procedimento":"Manual Teste",
            "num_questao":"1",
            "questao_desc":"Pedras ou aerolitos?",
            "alt_resp1":"A",
            "alt_resp2":"B",
            "alt_resp3":"C",
            "res_desc1":"Pedras",
            "res_desc2":"Aerolitos",
            "res_desc3":"Nenhuma Alternativas"
        }
        const containerTabela = document.getElementById("containerTabela");
        containerTabela.innerHTML=
        '<table>'+
        '<thead>'+
            '<tr style="background-color:#CCC">'+
                '<th colspan="2">'+documento.procedimento+'</th>'+
            '</tr>'+
        '</thead>'+
        '<tbody>'+
        '    <tr></tr>'+
        '    <tr>'+
        '        <td>'+documento.num_questao+' - </td>'+
        '        <td>'+documento.questao_desc+'</td>'+
        '    </tr>'+
        '    <tr>'+
        '        <td>'+documento.alt_resp1+' - </td>'+
        '        <td>'+documento.res_desc1+'</td>'+
        '    </tr>'+
        '    <tr>'+
        '        <td>'+documento.alt_resp2+' - </td>'+
        '        <td>'+documento.res_desc2+'</td>'+
        '    </tr>'+
        '    <tr>'+
        '        <td>'+documento.alt_resp3+' - </td>'+
        '        <td>'+documento.res_desc3+'</td>'+
        '    </tr>'+
        '</tbody>'+
    '</table>';
    </script>
</body>
</html>

I hope I’ve helped.

  • Oops Urilo, I added an answer for you to see how I’d like it to look.

0

Opa Murilo, thank you for your reply. It did give a little light, but the way I wanted to do it was using jquery. An example I did here, but it’s not working is this :

    <script src=”sweetalert-dev.js”></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script type="text/javascript">


        function confirmatreinamento() {
            swal({
                title: "Avaliação e treinamento",
                text: "Você deseja realizar sua avaliação agora?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#4CAF50",
                confirmButtonText: "Sim",
                cancelButtonText: "Não",
                closeOnConfirm: false,
                closeOnCancel: false},
                    function (isConfirm) {
                        if (isConfirm)
                        {
                            //   string doc = "";

                        } else {
                            swal("Avaliação cancelada!", "Você poderá realiza-lá depois =) ");
                            wait(2000);
                            history.go(-1);
                        }
                    });
        }



        function getAvaliacao() {

            appAjax.genericRequestJSON('/ajax/docAux/avaliacao.json', function (json) {



                $(json).each(function (i, documento) {

                    $("#questao").append("<td value ='" + documento.questao + "/td>")

                })
            });

        }


        function iniciar() {
            //confirmatreinamento();
            getAvaliacao();
        }


    </script>
</head>
<body class="teste" onload="iniciar()" >
    <h2>AVALIAÇÃO E TREINAMENTO</h2>
    <table id="divFilter">
        <thead>
            <tr>
                <th colspan="10">Filtro</th>
            </tr>
        </thead>
        <tr>                 
            <td id = "questao">

            </td>
        </tr>
    </table>

    <table id="matriz">
        <thead></thead>
    </table>
</body>

He enters the loop I made

" $("#question"). append("")"

but brings nothing on the screen.

  • The way you’re riding the <td> is wrong, change the $("#questao").append("<td value ='" + documento.questao + "/td>") for $("#questao").append("<td>" +documento.questao+ "</td>")

  • Thanks Murino, it worked. It was exactly what I wanted.

Browser other questions tagged javascript html jquery json

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