Display json value in a div

Question

Display json value in a div

Navigation

#1 by (2 votes)

4

How do I make a value 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>

FOR should happen by listing the result of the BD.

Example:

InHeadingwouldbeselectOcorrencias[seOcor].ID_OcorrenciaandinListitemwouldbeselectOcorrencias[seOcor].morador

ThisDIVisunique,asifyouaregroupingallthelists.So:

javascript jquery json

asked by anonymous 21.12.2015 / 02:51

1 answer

How to change the name in the android application package? How to receive data via POST, sent from android to webservice PHP?

score 2 · Accepted Answer

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: link

Note:

In your HTML you have duplicate IDs. This is invalid HTML. IDs have to be unique. I changed this in my answer, where IDs have the same number as ID_Ocorrencia