Creating HTML with JQuery and Json

Navigation
0

I want to get the output of JSON from the page select.php and put each line in a <div id="estabelecimento"> with its attributes, I'm doing the following: 

        $.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><divid="TodosEstabelecimentos">
    <div id="estabelecimento">
         <div id="nome">Nome</div>
         <div id="cidade">cidade</div>
         <div id="telefone">telefone</div>
    </div>
</div>

But in the output only comes the first line with its attributes, I want the entire JSON result line to create a new div with id establishment and with its due attributes inside.

    
asked by anonymous 26.12.2018 / 18:16

2 answers

0

Using id's is not appropriate because they will all repeat themselves and the id #nome , for example, will always catch the first one. You can do this by creating the HTML and then entering everything at once in 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 that instead of using id's, class was used, which can be repeated. Now HTML, you should leave div#TodosEstabelecimentos empty: 

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

Example: 

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><divid="TodosEstabelecimentos">
</div>
    
26.12.2018 / 18:39
0

If you want to put the contents of each JSON item in different div's as the code is, you should use the method append() instead of html() , you should add the div's by JavaScript as well and using classes instead of id's .

See an example code: 

$(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><divclass="monarks"></div>
    
26.12.2018 / 18:30
How to read a return xml containing CDATA in PHP How to change an icon by jQuery [duplicate]