Creating HTML with Jquery and Json

Question

I want to take JSON’s exit from the page select.php and place each line in a <div id="estabelecimento"> with your attributes, I’m doing it this way:

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

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

Answer 1

If you want to put the content of each JSON item into different div’s as is the code, you should use the method append() instead of html(), should add the divs for Javascript too and using classes instead of id’s.

See an example of 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>
<div class="monarks"></div>

Answer 2

Using id’s is not appropriate because they will all repeat themselves and id #nome, for example, you will always get the first one. You can do it this way by creating HTML and then inserting it all at once into 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 the 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>
<div id="TodosEstabelecimentos">
</div>