Извлечь значение из JSON и сгенерировать HTML для каждого регистра

Question

У меня возникла небольшая проблема с тем, как создать структуру JQuery для добавления HTML-кода к каждому из элементов, возвращаемых моим JSON. В основном я сомневаюсь в том, как получить каждое из значений JSON и поместить его в структуру повторения, чтобы создать код, который, к концу, должен быть напечатан на экране приложения. Это совсем простой код, поскольку я просто изучаю, как работать с телефонной связью, веб-сервисами и т. Д. Заранее спасибо.

Просто для того, чтобы осветить любое сомнение: я хочу создать панель для каждого элемента, возвращаемого запросом на JSON. Панель должна содержать чемпионат по футболу, и это страна, как и в закодированного примере ниже: App Layout

webservice.js

function listaCampeonatos(){ 
$.ajax({ 
    url: 'http://localhost/projetos/centraljogos/webservice//listagem.php', 
    type: 'GET', 
    dataType: 'json', 
    data: {type:'listaCampeonatos'}, 
    ContentType: 'application/json', 
    success: function(response){ 
     //alert('Listagem bem sucedida!'); 
     //$('#resultado').html(JSON.stringify(response)); 

     console.log(response); 

     for (i=0 ; i<response.length ; i++){ 
      alert('Entrou no for'); 
      $('#resultado').html(response[i].nome_campeonato); 
     } 
    }, 
    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); 
    } 
}); 

}

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

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

Answer 1

сделать некоторые изменения в listagem.php, как указано ниже

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

    $saida = json_encode($registros); 

    echo $saida; 

Теперь вы сможете перебрать возвращенного response объекта в webservice.js

success: function(response){ 
     //alert('Listagem bem sucedida!'); 
     //$('#resultado').html(JSON.stringify(response)); 

     console.log(response); 

     for (i=0 ; i<response.length ; i++){ 
      alert('Entrou no for'); 
      $('#resultado').html(response[i].nome_campeonato); 
     } 
    } 

Не используйте $('#resultado').html(response[i].nome_campeonato) если вы нужны все значения response[i].nome_campeonato внутри <div id="resultado"></div>. Вместо использования

$('#resultado').append(response[i].nome_campeonato +"<br>");