O cenário é o seguinte: recebo um JSON array do meu webservice e a cada vez que percorrer, seto as informações de acordo com o index (evento 1, 2, 3, etc)
A minha função é a seguinte:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://localhost:8080/SemanaEngenharia/webresources/services.evento/",
data: "", /* redundante */
dataType: "JSON", /* dispensa a necessidade do parse JSON */
success: function(data) {
$(data).each(function(index, element) {
$(".titulosPostagens").html(data[i].titulo);
$("#p").html(data[i].palestrante);
$("#v").html(data[i].qtdVagas);
$("#dataInicio").html('Inicio: ' + data[i].inicio);
$("#dataTermino").html('Termino: ' + data[i].termino);
$("#le").html(data[i].endereco);
$("#d").html(data[i].descricao);
$("#pa").html(data[i].publicoAlvo);
});
}
}); // fim ajax
});
Retorno do JSON:
[{"descricao":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique ligula sed nibh finibus, id placerat elit mollis. Proin dictum sed felis vitae vulputate. Nunc vitae velit feugiat, porttitor felis quis, pharetra risus. Integer id dolor sapien. Aenean ultricies, risus at lacinia blandit, leo mi tincidunt risus, at gravida nisi nisl ut dui. Donec vitae consectetur urna. Phasellus at augue vel nisl semper aliquet eu vel ante. Ut venenatis lacus id velit aliquet, ac congue neque mollis. Quisque at elit mollis arcu condimentum imperdiet.","endereco":"Laboratorio 4","idEvento":5,"inicio":"05/10","palestrante":"Profº José Marinho","qtdVagas":40,"termino":"09/10","titulo":"Palestra de Jogos"},{"descricao":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique ligula sed nibh finibus, id placerat elit mollis. Proin dictum sed felis vitae vulputate. Nunc vitae velit feugiat, porttitor felis quis, pharetra risus. Integer id dolor sapien. Aenean ultricies, risus at lacinia blandit, leo mi tincidunt risus, at gravida nisi nisl ut dui. Donec vitae consectetur urna. Phasellus at augue vel nisl semper aliquet eu vel ante. Ut venenatis lacus id velit aliquet, ac congue neque mollis. Quisque at elit mollis arcu condimentum imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique ligula sed","endereco":"CETEP (Sala 2) - UNIFAE","idEvento":6,"inicio":"05/10","palestrante":"Profº Mrº Tiago","qtdVagas":35,"termino":"09/10","titulo":"Startup: O que é e como começar?"},{"descricao":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique ligula sed nibh finibus, id placerat elit mollis. Proin dictum sed felis vitae vulputate. Nunc vitae velit feugiat, porttitor felis quis, pharetra risus. Integer id dolor sapien. Aenean ultricies, risus at lacinia blandit, leo mi tincidunt risus, at gravida nisi nisl ut dui. Donec vitae consectetur urna. Phasellus at augue vel nisl semper aliquet eu vel ante. Ut venenatis lacus id velit aliquet, ac congue neque mollis. Quisque at elit mollis arcu condimentum imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique ligula sed","endereco":"CETEP (Sala 2) - UNIFAE","idEvento":7,"inicio":"05/10","palestrante":"Mrº Rosa Elena","publicoAlvo":"Engenharia de Software e Computação","qtdVagas":35,"termino":"09/10","titulo":"Introdução ao Arduíno"}]
Já no meu HTML, possuo 3 corpos de postagens semelhantes ao código a seguir, e gostaria que, em cada corpo, fosse inserido a informação de cada index:
<div id="menuPrincipal">
<div class="**titulosPostagens**">
null
</div>
<!-- pq as divs estao se ajustando de acordo com o tamanho do texto?-->
<div id="palestrante">
<i class="fas fa-chalkboard-teacher"></i> Palestrante: **<span class="p">null</span>**
</div>
<div id="vagas">
Vagas: **<span class="v"></span>**/40 <!-- 18/20 18 decrementa a cada vaga confirmada-->
</div>
<div>
**<div class="dataInicio">**
null
</div>
**<div class="dataTermino">**
null
</div>
</div>
<div id="localEvento">
<i class="fas fa-map-marker-alt"></i> **<span class='le'>null </span>**
</div>
<div id="publicoAlvo">
<i class="fas fa-bullseye"></i> Público alvo: <**span class='pa'>null </span>**
</div>
<hr id="hrDivisorio">
<div class="observacoesPostagens"></div>
</div>