Retrieve JSON values and assemble HTML for each record

Question

Retrieve JSON values and assemble HTML for each record

Navigation

#1 by (1 votes)

1

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

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

webservice.js

functionlistaCampeonatos(){$.ajax({url:'http://localhost/projetos/cjwebservice/listagem.php',type:'GET',dataType:'json',data:{type:'listaCampeonatos'},ContentType:'application/json',success:function(response){alert('Listagembemsucedida!');$('#resultado').html(JSON.stringify(response));},error:function(err){alert('Ocorreuumerroaosecomunicarcomoservidor!Porfavor,entreemcontatocomoadministradoroutentenovamentemaistarde.');console.log(err);}});

}

listing.php

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

games.html

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

php mysql javascript html apache-cordova

asked by anonymous 06.10.2016 / 17:38

1 answer

Parallax effect is not working on mobile UPLOAD - NO ACCESS TO FILES [closed]

score 1 · Answer 1

If I understand correctly 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();