Limpar lista javascript e popular novamente [RESOLVIDO]

Front-end JavaScript
#1

Pessoal, estou apendendo javascript agora e surgiu uma dúvida.

Estou populando a lista de usuários normalmente, mas quando entro na tela pela segunda vez os registros são duplicados.

Lembrando que via json está trazendo corretamente.

Como poderia solucionar esse problema?

function listaUsuarios() {	
			//$("#usuarios").empty(); 
			
			mainView.router.load({pageName: 'usuario'});
				
			$.get(WS_URL + 'usuario/list', function(data){
					$(data).each(function(i){
					var clone = $('#usuarios li').first().clone().show();
					clone.find('.item-title').text(this.nome);
					clone.find('.item-after').text(this.email);
					$('#usuarios').prepend(clone);
				});
			}).done(function(){
			});
		};


  <div class="content-block-title">Lista Usuários</div>
					<div class="list-block">
					  <ul id='usuarios'>
						<li style='display:none'>
						  <div class="item-inner">
					  	    <div class="item-media"><i class="icon icon-f7"></i></div>
							<div class="item-title"></div>
							<div class="item-after"></div>
						  </div>
						</li>
					  </ul>
					</div>
				  </div>

Obrigado

#2

Boa tarde,

Tente colocar o $('#usuarios').append(""); depois dessa linha `$.get(WS_URL + ‘usuario/list’, function(data){``.

#3

@campelo.m, obrigado pela ajuda.

Não deu certo. Será que eu teria que montar toda a estrutura da

antes?
#4

Bom dia,

Com o clone creio que nao ira funcionar;
Fiz um exemplo aqui

1 curtida
#5

@campelo.m

Amigão, muito obrigado mesmo por ter disponibilizado seu tempo para ajudar.

Funcionou certinho.

Agora consigo replicar para toda tela que precisar de uma lista.

Cobra o café que pago. rsrs

1 curtida
#6

@campelo.m, posso abusar da sua boa vontade?

	$(data).each(function(i){
	 var html = '';
			  $('ul#usuarios')[0].innerHTML = '';
			  //var usuario = this;
			  $(data).each(function(i){
				//usuario = this;
				//var clone = $('#usuarios li').first().clone().show();
				//clone.find('.item-title').text(this.nome);
				
				//console.log("b"); 
				html += '<a href="#" class="item-link item-content">' +
							  '<li style="display:inline">'+
							  '<div class="item-inner">'+
								'<div class="item-media">'+
								  '<i class="icon icon-f7"></i>'+
								'</div>'+
								'<div id="nomeUsuarioSelecionado" class="item-title">'+this.nome+'</div>'+
								'<div class="item-after">'+this.email+'</div>'+
								'</div>'+
							   '</li>' +
							'</a>';        
				});
			
				$('#usuarios').append(html);
				
				$("#usuarios li").click(function() {
					  alert($('#nomeUsuarioSelecionado').text());
					  alert(this.id); // id of clicked li by directly accessing DOMElement property
					  alert($(this).attr('teste')); // jQuery's .attr() method, same but more verbose
					  alert($(this).html()); // gets innerHTML of clicked li
					  alert($(this).text()); // gets text contents of clicked li
					  alert($('html').attr('#item-title'));
					  alert($( this ).parent( ".item-title" ));
				 });

});

Como eu pego o “item-tilhe” e o “item-after”?

#7

Assim voce pode pegar:

console.log($(this).find(".item-title")[0].innerText);
console.log($(this).find(".item-after")[0].innerText);
1 curtida
#8

@campelo.m,

Funcionou certinho, mais uma vez obrigado =)