View json value in a div

Asked

Viewed 278 times

4

How to make a value that is in JS appear in html content?

app js.

 // BUSCA OCORRENCIAS
 $("#menuOcorrencia").click(function() {
     var operacao = "selectOcorrencias";
     $.getJSON("http://url.com.br/appOperacoes.php", {operacao:operacao,condominioID:condominioID}, function(selectOcorrencias){
        for (var seOcor in selectOcorrencias){
          document.write(selectOcorrencias[seOcor].ID_Ocorrencia + selectOcorrencias[seOcor].morador + "<br />");
        }
    });
});

part of the html that is in index.html

<div class="list-group widget uib_w_44 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
    <a class="list-group-item allow-badge widget uib_w_45" data-uib="twitter%20bootstrap/list_item" data-ver="1" id="btnOcorrenciaVer">
         <h4 class="list-group-item-heading">Heading</h4>
         <p class="list-group-item-text">List item</p>
    </a>
</div>

The FOR should happen by listing the result that came from the BD.

Example:

inserir a descrição da imagem aqui

In Heading would be the selectOcorrencias[seOcor].ID_Ocorrencia and in List item would be selectOcorrencias[seOcor].morador

This DIV is unique, it’s like grouping all the lists. So:

inserir a descrição da imagem aqui

  • Plays the "html" inside the loop for and gives append to display wherever.

1 answer

2


Assuming you want to continue adding content from JSON here: <div class="list-group widget uib_w_44 d-margins"....

You can do it like this:

var target = document.querySelector('.list-group');
json.forEach(function(ocorrencia) {
    // link externo / wrapper
    var a = document.createElement('a');
    a.className = 'list-group-item allow-badge widget uib_w_45';
    a.setAttribute('data-uib', 'twitter%20bootstrap/list_item');
    a.setAttribute('data-ver', '1');
    a.id = ocorrencia.ID_Ocorrencia;
    // titulo
    var heading = document.createElement('h4');
    heading.className = 'list-group-item-heading';
    heading.innerHTML = 'Ocorrência: ' + ocorrencia.ID_Ocorrencia;
    // texto
    var p = document.createElement('p');
    p.className = 'list-group-item-text';
    p.innerHTML = ocorrencia.morador;

    // inserir no DOM
    a.appendChild(heading);
    a.appendChild(p);
    target.appendChild(a);
});

Example: https://jsfiddle.net/w8m7981d/

Note:

In your HTML you have duplicate Ids. That’s invalid HTML. Ids have to be unique. I changed that in my reply, where Ids have the same number as ID_Ocorrencia

Browser other questions tagged

You are not signed in. Login or sign up in order to post.