0

Quero pegar a saída do JSON da pagina select.php e colocar cada linha em uma <div id="estabelecimento"> com os seus atributos, estou fazendo da seguinte maneira:

        $.getJSON('select.php', function(data) {
            $.each(data, function(index, element) {
                $('#nome').html(element.nome);
                $('#cidade').html(element.cidade);
                $('#telefone').html(element.telefone);
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TodosEstabelecimentos">
    <div id="estabelecimento">
         <div id="nome">Nome</div>
         <div id="cidade">cidade</div>
         <div id="telefone">telefone</div>
    </div>
</div>

Porem na saída só me vem a primeira linha com seus atributos, eu quero que toda a linha de resultado do JSON crie uma nova div com id estabelecimento e com o seus devidos atributos dentro.

2 Respostas 2

0

Utilizando id's não é o adequado porque irão todos se repetir e o id #nome, por exemplo, irá sempre pegar o primeiro. Você pode fazer desta forma, criando o HTML e depois inserindo tudo de uma vez na div#TodosEstabelecimentos:

$.getJSON('select.php', function(data) {

   var estabs = '';
   $.each(data, function(index, element) {

      estabs += '<div class="estabelecimento">'
      + '<div class="nome">'+element.nome+'</div>'
      + '<div class="cidade">'+element.cidade+'</div>'
      + '<div class="telefone">'+element.telefone+'</div>'
      + '</div>';
   });

   $("#TodosEstabelecimentos").html(estabs);

});

Note que em vez de utilizar id's, foi utilizado class, que podem se repetir. Agora o HTML, você deve deixar a div#TodosEstabelecimentos vazia:

<div id="TodosEstabelecimentos">
</div>

Exemplo:

var data = [
   { nome: "dvd", cidade: "bsb", telefone: "123" },
   { nome: "sam", cidade: "sp", telefone: "456" }
];

var estabs = '';
$.each(data, function(index, element) {

   estabs += '<div class="estabelecimento">'
   + '<div class="nome">'+element.nome+'</div>'
   + '<div class="cidade">'+element.cidade+'</div>'
   + '<div class="telefone">'+element.telefone+'</div>'
   + '</div>';
});

$("#TodosEstabelecimentos").html(estabs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TodosEstabelecimentos">
</div>

0

Se você quer colocar o conteúdo de cada item do JSON em div's diferentes como está o código, deve utilizar o método append() ao invés do html(), deve adicionar as div's pelo JavaScript também e utilizando classes ao invés de id's.

Veja um exemplo de código:

$(function(){
  $.getJSON("http://mysafeinfo.com/api/data?list=englishmonarchs&format=json", function(data){
    $.each(data, function(key, val){
      $(".monarks").append("<div class='monark'>"+
      "<div class='id'>ID: "+val.id+"</div>"+
      "<div class='nm'>Name: "+val.nm+"</div>"+
      "<div class='cty'>Country: "+val.cty+"</div>"+      
      "<div class='hse'>House: "+val.hse+"</div>"+      
      "<div class='yrs'>Years: "+val.yrs+"</div>"+
      "</div>");
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="monarks"></div>

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 .