2

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>
6
  • PS: ignorem o "[i]", era so pra ilustrar Commented 7/12/2018 às 19:15
  • 1
    Mas qual é o seu problema? e poste o json que a url localhost:8080/SemanaEngenharia/webresources/services.evento trás Commented 7/12/2018 às 19:16
  • 1
    Bom, o meu webservice retorna uma lista de dados JSON, no caso, eu teria que selecionar pelo indice (evento 0, evento 1, evento 2) de acordo com a ordem do banco. Mas eu gostaria que o jquery percorresse automatico, como se fosse num for do java (evento[i].getNome()). Vi alguns exemplos do each, mas nao consegui aplica-lo no meu exemplo Commented 7/12/2018 às 19:21
  • O retorno do JSON: imgur.com/a/UQ34rvs Commented 7/12/2018 às 19:23
  • 2
    Edite a pergunta e coloque o Json nela Commented 7/12/2018 às 19:31

4 Respostas 4

4

Apenas troque data[i] por element

$(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(element.titulo);
                $("#p").html(element.palestrante);
                $("#v").html(element.qtdVagas);
                $("#dataInicio").html('Inicio: ' + element.inicio);
                $("#dataTermino").html('Termino: ' + element.termino);
                $("#le").html(element.endereco);
                $("#d").html(element.descricao);
                $("#pa").html(element.publicoAlvo);
            });
        }
    }); // fim ajax
});

Um exemplo utilizando o seu json

var data = [{"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"}];

$(data).each(function(index, element) {
  console.log(element.titulo);
  console.log(element.palestrante);
  console.log(element.qtdVagas);
  console.log(element.inicio);
  console.log(element.termino);
  console.log(element.endereco);
  console.log(element.descricao);
  console.log(element.publicoAlvo);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Criando novos elementos com o seu Json

var data = [{"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"}];

//Cria um clone do elemento original
var elementoPai = $(".pai").clone();

//Removo o elemento original
$(".pai").remove();
 
//Pecorro os dados
$(data).each(function(index, element) {	  

  //Coloco as informações no elemento, estou usando class, já que ids não podem se repetir
  elementoPai.find(".titulosPostagens").html(element.titulo);
  elementoPai.find(".p").html(element.palestrante);
  elementoPai.find(".v").html(element.qtdVagas);
  elementoPai.find(".dataInicio").html('Inicio: ' + element.inicio);
  elementoPai.find(".dataTermino").html('Termino: ' + element.termino);
  elementoPai.find(".le").html(element.endereco);
  elementoPai.find(".d").html(element.descricao);
  elementoPai.find(".pa").html(element.publicoAlvo);
  
  //Cria o novo elmento, lembresse de usar clone para criar um novo e não move.
  $('.conteudo').append(elementoPai.clone());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="conteudo">
  <div class="pai">
    <p class="titulosPostagens">

    </p>
    <p class="p">

    </p>
    <p class="v">

    </p>
    <p class="dataInicio">

    </p>
    <p class="dataTermino">

    </p>
    <p class="le">

    </p>
    <p class="d">

    </p>
  </div>
</div>

5
  • Wictor, funcionou :o. Mas no caso, estou setando as informaçoes no meu html, e ao inves de ficar cada div com um respectivo index, ficou todas com o ultimo elemento da lista (como ja era de se esperar, ja que uso as mesmas classes em todas as divs), sabe como posso contornar esse problema? Se preciso, posto o html também Commented 7/12/2018 às 19:45
  • Você quer criar novos elementos na tela, é isso? Commented 7/12/2018 às 19:50
  • vamos supor que eu tenha uma lista com 3 elementos no meu HTML: 1, 2, e 3, e no meu JSON array eu tenha 3 elementos: A, B e C. Eu quero que, em cada "each", seja setado a informação de acordo com o index, ficando: 1 A 2 B 3 C Pois do modo que me ensinou, ficou todos assim: 1 C 2 C 3 C eu sou pessimo em explicar, me perdoe Commented 7/12/2018 às 19:52
  • Fiz um exemplo utilizando o seu json. Commented 7/12/2018 às 19:58
  • 1
    cara, voce é magnifico, nem acredito que deu certo kk. MUITO obrigado! Commented 7/12/2018 às 20:37
1

Você não precisa usar jQuery para iterar no seu array, você pode usar o método Array.forEach.

let lista = ['a', 'b', 'c'];

lista.forEach(function(element, index) {
  console.log(`lista[${index}] == ${element}`);
});

Mas se você realmente faz questão de utilizar jQuery para isso você deve usar a variação jQuery.each().

let lista = ['a', 'b', 'c'];

$.each(lista, function(index, element) {
  console.log(`lista[${index}] == ${element}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


A diferença entre $.each() e $(seletor).each() é que o segundo itera exclusivamente sobre objetos do tipo jQuery, enquanto o primeiro funciona como um "método estático" funcionando como um iterador genérico.

E quanto à compatibilidade, o Array.forEach() já tem uma compatibilidade descente (IE9+)

0
0

Uma solução não tão "bonita", por assim dizer, seria varrer o objeto e pegar o "array" de acordo com a key dele. Vamos supor que seu objeto esteja assim: {"array":[{obj_key1:value_1...},{obj_key2:value_2...},{obj_key3:value_3...},..,{obj_keyN:value_N...}]}. Com isso pego o value que tem array como key:

Object.keys(data).forEach(function(key){
      if(key=="array"){
           var list=data[key]; // agora list é seu array de objetos, só iterar sobre ele para percorrer todos objetos dentro dele 
      }
 }
0

Quando eu preciso fazer um foreach em um objeto eu utilizo um codigo parecido com este, abaixo.

O Método hasOwnProperty evita que eu acesse propriedades do objeto.

function each(e,callback){ 
    for(var i in e){ 
        if( e.hasOwnProperty(i) ) 
            callback.call(e,i,e[i]); 
    } 
}



each( [1,2,3,4,5,6] , console.log );

each( {"key1":1234,"key2":2,"key3":4}, console.log );

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .