Retrieve JSON values and mount HTML for each record

Question

I’m having doubts about how to structure a JQuery that should append an HTML code to each of the items that a JSON returns to me. My question is how to retrieve each of the JSON values and make a repeat structure to create the HTML code that will finally be printed on the page. It’s all very simple because I’m learning to work with Phonegap. Thanks for your help.

For example: I want each item returned in JSON to create a Panel with the name of the country and championship as the hardcoded example of the image:

webservice.js

function listaCampeonatos(){
$.ajax({
    url: 'http://localhost/projetos/cjwebservice/listagem.php',
    type: 'GET',
    dataType: 'json',
    data: {type:'listaCampeonatos'},
    ContentType: 'application/json',
    success: function(response){
        alert('Listagem bem sucedida!');
        $('#resultado').html(JSON.stringify(response));
    },
    error: function(err){
        alert('Ocorreu um erro ao se comunicar com o servidor! Por favor, entre em contato com o administrador ou tente novamente mais tarde.');
        console.log(err);
    }
});

}

php listing.

include './conexao.php';

header("Access-Control-Allow-Origin: *");

$link = conectar();

if ($_GET['type'] == "listaCampeonatos") {
//echo 'Tipo de operação: ' . $_GET['type'] . '<br>';

$query = "SELECT c.id AS id_campeonato, c.nome_camp AS nome_campeonato, p.nome_pais AS nome_pais
              FROM tb_campeonato c
              LEFT JOIN  tb_pais p ON p.id = c.tb_pais_id
              LEFT JOIN  tb_partida pt ON pt.tb_campeonato_id = c.id
              WHERE pt.flag_ativo = 1

              GROUP BY p.nome_pais";

$result = mysqli_query($link, $query);

$registros = array();

while ($reg = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $registros[] = array('Campeonatos' => $reg);
}

$saida = json_encode(array('Lista' => $registros));

echo $saida;}

html games.

<!-- COTAÇÕES INÍCIO -->
    <div id="painel_partidas" class="panel panel-primary panel-heading-margin">
        <div class="panel-heading">
            <center>
                <b>Brasil &raquo; Série A - 19/10/2016</b>
                <button data-toggle="collapse" data-target="#partida" class="btn btn-default btn-xs pull-right"><i class="fa fa-compress"></i></button>
            </center>
        </div>

        <div id="partida">
            <div class="w3-border">

                <center>
                    <button class="btn btn-xs btn-danger" onclick="listaCampeonatos()"><i class="fa fa-search"></i>
                    Testar JSON
                    </button>
                </center>

                <div id="resultado"></div>

                <!--COTAÇÕES AQUI-->

            </div>
        </div>
    </div>
    <!-- COTAÇÕES FIM -->

Answer 1

If I understand what you want, this is the way I use to search the server and list 4 products per line on the screen:

           listaProduto = function () {
            $.ajax({
                url: '/Produto/ListaProduto',
                type: "POST",
                async: true,
                dataType: "json",
                success: function (data) {
                    linha = "";
                    if (data == "")
                        return;
                    var c = 1;
                    for (i = 0; i < data.length; i++) {
                        if (c == 1) {
                            linha = '<div class="row listagem-cachaca">';
                        }
                        linha += '<div class="col-sm-3 item-produto"><a href="/produto/' + data[i].URLPagina + '">';
                        linha += '<img src="' + data[i].EnderecoImagem + '" title="' + data[i].Descricao + '" alt="' + data[i].DescricaoAlternativa +
                                    '" width="' + data[i].Largura + '" height="' + data[i].Altura + '" class="img-responsive center-block" />';
                        linha += '<h4 class="nomeProduto">' + data[i].NomeProduto + '</h4></a>';
                        linha += '<p>' + data[i].Descricao + '</p>';
                        if (data[i].PrecoNormal == 0 || data[i].PrecoNormal == null || data[i].QtdVagas == 0 || data[i].QtdVagas == null) {
                            linha += '<p class="produtoIndisponivel">Produto Indisponível</p>';
                            linha += '<form action="/AssinanteContato/Aviseme" class="form-inline"  ' +
                                '  id="form' + i + '" method="get">';
                            linha += '<input type="hidden" class="form-control" name="id" value="' + data[i].IdProduto + '" size="3">';
                            linha += '<div class="form-group"> ';
                            linha += '<input type="submit" value="Avise-me" class="btn btn-danger"></div></form></div>';
                        }
                        else {
                            if (data[i].PrecoNormal > data[i].PrecoAVista) {
                                linha += '<h4><strike style="color:red">De R$' + data[i].PrecoNormal.toFixed(2).replace('.', ',') + '</strike> <b>&nbsp;   Por R$ ' + data[i].PrecoAVista.toFixed(2).replace('.', ',') + '</b></h4>';
                            } else {
                                linha += '<h4><b>R$ ' + data[i].PrecoNormal.toFixed(2).replace('.', ',') + '</b></h4>';
                            }
                            linha += '<form action="/ClienteProdutoItem/Solicitar" class="form-inline" data-ajax="true" data-ajax-failure="FalhaAdicionarCarrinho"' +
                                ' data-ajax-success="SucessoAdicionarCarrinho" data-ajax-update="#carrinhoCompra" id="form' + i + '" method="post">';
                            linha += '<input type="hidden" class="form-control" name="id" value="' + data[i].IdProduto + '" size="3">';
                            linha += '<div class="form-group"><label for="qtd">Qtd</label>';
                            linha += '<input class="input-sm" type="number" name="qtd"  value="1" min="1" size="3">';
                            linha += '<input type="submit" value="Adicionar" class="btn btn-danger"></div></form></div>';
                        }
                        if (c == 4) {
                            linha += '</div>';
                            $('.listaProduto').append(linha);
                            linha = "";
                            c = 0;
                        }
                        c++;
                    }
                    if (c > 0 && linha.length > 0) {
                        linha += '</div>';
                        $('.listaProduto').append(linha);
                    }
               }
           });
        };
        listaProduto();