0

Eu estou com uma dúvida em como mostrar os dados de um retorno json, na tela utilizando html,javascript e jquery. Dentro de um arquivo jsp.

Segue minha function em javascript:

  function getAvaliacao(){

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

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

                    })
                });                            

            }

Dentro de "documento", eu tenho os seguintes campos do banco de dados.

procedimento, num_questao, questao_desc, alt_resp, res_desc, alt_correta

Eu preciso aprensentar eles na tela em forma de uma prova pro usuário desta forma:

Procedimento

num_questao - questao_desc

alt_resp - res_desc

alt_resp - res_desc

alt_resp - res_desc

alt_resp - res_desc

Ex:

Manual teste

1 - Você é a favor do aborto?

A - Sim

B - Nao

C - Talvez

D - Nao sei

E - Nao opinar

2 - Você é a favor da legalizacao da maconha?

A - Sim

B - Nao

C - Talvez

D - Nao sei

E - Nao opinar

3 - etc...

Onde o usuário escolheria qual questão ele acharia correta.

Não sei muito de html e javascript, por isso estou com dificuldades pra fazer esse básico e gostaria de ajuda.

2 Respostas 2

2

Da para resolver seu problema de muitas maneiras diferentes, um jeito simples é utilizar uma tabela.
Com o javascript você pode montar essa tabela e utilizar o innerHTML e inseri-la depois na página.

Criei esse código abaixo para exemplificar como você pode fazer, só salvar com a extenção .html e abrir no navegador para você testar. Depois é só alterá-lo conforme suas necessidades.

<!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>

Espero ter ajudado.

1
  • Opa murilo, eu adicionei uma resposta para você ver como eu gostaria que ficasse. Commented 9/08/2019 às 1:35
0

Opa Murilo, obrigado pela resposta. Deu uma pequena clareada sim, porém a forma que eu gostaria de fazer, era usando jquery. Um exemplo que fiz aqui, porém não está funcionando é este :

    <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>

Ele entra no loop que fiz

" $("#questao").append("")"

porém não traz nada na tela.

2
  • O jeito que você esta montando o <td> esta errado, mude o $("#questao").append("<td value ='" + documento.questao + "/td>") para $("#questao").append("<td>" +documento.questao+ "</td>") Commented 9/08/2019 às 2:57
  • Obrigado Murino, funcionou. Era exatamente o que eu queria. Commented 9/08/2019 às 3: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 .