How to browse a list using each JQUERY

Navigation
0

The scenario is as follows: I get a JSON array from my webservice and each time I scroll through the information according to the index (event 1, 2, 3, etc.)

My job is as follows: 

 $(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
});

Return from 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"}]

In my HTML, I have 3 post bodies similar to the following code, and I would like the information of each index to be inserted in each body: 

 <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>
    
asked by anonymous 07.12.2018 / 20:14

4 answers

1

Just change date [i] by 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
});

An example using your 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>

CreatingnewelementswithyourJson

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><divclass="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>
    
07.12.2018 / 20:42
1

You do not need to use jQuery to iterate through your array, you can use the Array.forEach . 

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

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

But if you really want to use jQuery for this, you should use jQuery.each() variation. 

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>

Thedifferencebetween $.each() and

As for compatibility, $(seletor).each() you already have a Down Compatibility (IE9 +)

    
07.12.2018 / 20:41
0

A not so "pretty" solution, so to speak, would be to scan the object and get the "array" according to its key. Let's suppose your object looks like this: {"array": [obj_key1: value_1 ...}, {obj_key2: value_2 ...}, {obj_key3: value_3 ...}, .., {obj_keyN: value_N ...}}}. With this I get the value that has array as 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 
      }
 }
    
07.12.2018 / 20:32
0

When I need to make a foreach into a objeto I use a code similar to this, below.

The method hasOwnProperty prevents me from accessing properties of the object. 

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 );
    
07.12.2018 / 21:20
How to make the result of a column? Doubt regarding the events of the Task Schedule- Laravel