Carregar uma table com campos com json.[RESOLVIDO]

21 de julho de 2011 19 respostas

vasilvei 21 de julho de 2011

Boa tarde estou com uma dificuldade para carregar uma table com json, o que eu gostaria é o seguinte nesse tabela que é item, eu tenhos campos nela, de forma que eu gostaria de fazer uma busca com json e carrega esse tabela ou seja ao buscar a e trazer os dados ele carregue essa tabela com os eu já fiz o json ele esta trazendo os dados e tal, só que estou com problema de carregar a tabela, segue abaixo parte do código:

JSP:

...
<table class="tableitem table">
				<thead>
					<tr>				
						<th>|Cód. item</th>
						<th>|Cód. de barra</th>
						<th>|Sub. descrição</th>
						...						
							
					</tr>
				</thead>
			
				<tbody>
			
				  	<c:forEach items="${itemList}" var="item" varStatus="s"> 
				
                          
                                <td >                                
	                                <input id="iditem${s.index}" class="limpar " type="text" value="${item.iditem}" 
	                                name="item[${s.index}].iditem" readonly="readonly" size="10">
                                 </td>
                                 <td >                                
	                                <input id="codbarra${s.index}" class="limpar inputForm" type="text" value="${item.codbarra}" 
	                                name="item[${s.index}].codbarra" maxlength="30" size="30" onkeydown="return desabilitaEnter(this, event)">
                                 </td>
                                 <td >                                
	                                <input id="subdescricao${s.index}" class="limpar upper inputForm" type="text" value="${item.subdescricao}" 
	                                name="item[${s.index}].subdescricao" maxlength="40" size="40" onkeydown="return desabilitaEnter(this, event)">
                                 </td>


                                ....

JavaScript(Json) aqui que acho que estou errando

function funcoesProduto(urls) {
	var url = urls;
	if (($("#id").val() == "") && url != '/Coliseu/ultimoProduto') {
		url = '/Coliseu/primeiroProduto';
	}
	$.getJSON(url, {
		//idproduto : $("#id").val()
	}, function(json) {
		dataType : 'json';
				
		var item = json.list;
		var value;
		for ( var i in item) {			
			$("#iditem"+i).val( item[i].iditem);
			$("#codbarra"+i).val( item[i].codbarra);
			$("#subdescricao"+i).val( item[i].subdescricao);
			
		}
	
		
	});


	}

Classe Controller

@Restrito
	@Get
	@Path("/ultimoProduto")
	public void ultimoProduto() {
	
		try {
			Collection<Item> Item = daoItem.lista(25);
				
			result.use(Results.json()).from(Item).serialize();
		
		....
	}

Eu estava imagina, que teria que criar os com javaScript e tals, mas gostaria de saber se tem como carregar o <c:forEach items="${itemList}" var=“item” varStatus=“s”> via json?

Obrigado.

19 Respostas

Lucas_Cavalcanti 21 de jul. de 2011

sempre tem, o problema é quanto trabalho vc vai ter

dá pra fazer sim, a idéia é vc pegar o json e recriar cada linha da tabela…

dá pra usar o jQuery template pra montar a linha, e depois só alimentar os dados.

vasilvei 21 de jul. de 2011

A questão de desempenho, não fica muito pesado?

Lucas_Cavalcanti 21 de jul. de 2011

geralmente não… a menos que vc vá mostrar muitas linhas, mas dá pra fazer ser mais leve (gerar todas as linhas da tabela numa string e adicionar tudo de uma vez na tabela)

vasilvei 22 de jul. de 2011

no caso a minha tabela tem um forEach:

<c:forEach items="${itemList}" var="item" varStatus="s"> 
	                    
                            <tr>
       <td >                                
	                                <input id="iditem${s.index}" class="limpar " type="text" value="${item.iditem}" 
	                                name="item[${s.index}].iditem" readonly="readonly" size="10">
                                 </td>
                  .....

pois ela também é carregada de forma padrão carregando todo o formulário, eu tenho que incluir a tab <c:forEach items="${itemList}" var=“item” varStatus=“s”> na string, e colocar as linhas conforme o tamanho da lista, e depois alimentar os valores dos com o valor que vem do json.

Lucas_Cavalcanti 22 de jul. de 2011

vc não vai poder usar o c:forEach… depois que foi pro browser e vc fez o ajax vc só pode usar html, não tags do jsp

vasilvei 22 de jul. de 2011

Consegui fazer carregar os campos, só gostaria agora de saber como que eu faço para carregar um objeto Produto, e uma list, ao mesmo tempo com Json, fiz da seguinte forma, mas ele não carrega nos campos, porém se eu digitar direto na url ele trás os dados, é alguma coisa que estou errando no js, mas não consegui descrobrir, segue parte do código abaixo:

Json:

function funcoesProduto(urls) {
	
	var url = urls;
	if (($("#id").val() == "") && url != '/Coliseu/ultimoProduto') {
		url = '/Coliseu/primeiroProduto';
	}
	$.getJSON(url, {
		idproduto : $("#id").val()
	}, function(produto, json) {
		$('.limpar').val("");
		$("#estab").val(produto.filial.estab);
		$("#id").val(produto.idproduto);
		$("#descricao").val(produto.descricao);
       .....

     var item = json.list;
		var value;
		// Captura a referência da tabela com id ?minhaTabela?
		for ( var i in item) {
			var newRow = table.tBodies[0].insertRow(i);

			var cell0 = newRow.insertCell(0);
			var btnEl0 = document.createElement('input');
			btnEl0.setAttribute('type', 'button');
			btnEl0.onclick = function() {
				$('#idreg').val('/Coliseu/excluirItem/${item.iditem}');
				$('#clickRem').click();
			};
			btnEl0.setAttribute('value', 'Excluir');
			btnEl0.onkeydown = function() {
				return desabilitaEnter(this, event);
			};
			cell0.appendChild(btnEl0);

			var cell1 = newRow.insertCell(1);
			var chkInp1 = document.createElement('input');
			chkInp1.setAttribute('type', 'checkbox');
			chkInp1.setAttribute('id', 'situacao' + i);
			chkInp1.setAttribute('class', 'limpar');			
			chkInp1.setAttribute('name', 'item.' + [ i ] + '.situacao');
			chkInp1.setAttribute('value', item[i].situacao); // iteration
    .....

@Restrito
	@Get
	@Path("/ultimoProduto")
	public void ultimoProduto() {
		Produto produto = null;
		try {
			produto = dao.primeiroOuUltimo("desc");		
			
			if (produto != null) {					
				
				result.use(Results.json())
						.withoutRoot()
						.from(produto)
						.include("filial", "grupo", "subgrupo", "tributacoes", "icms").serialize();
	                         List<Item> Item = daoItem.lista(produto.getIdproduto);
				result.use(Results.json()).from(Item).serialize();
				
			} else {
				result.forwardTo("/WEB-INF/jsp/produto/produtoEdit.jsp");
			}
		} catch (Exception e) {
			result.forwardTo("/WEB-INF/jsp/produto/produtoEdit.jsp");
		}
	}

Lucas_Cavalcanti 22 de jul. de 2011

$('<input type="text" name="abc">')

cria um input, e vc pode pegar isso e dar um appendTo em outro elemento do jquery, não precisa usar createElement… tenta converter pra isso

vasilvei 22 de jul. de 2011

Eu tentei fazer dessa forma mas deu muito erro, sem falar que ficou desorganizado, daí preferi fazer utilizando o createElement, porque não são muitas linhas, só no máximo 10 linhas, sabe como eu faço para retornar o objeto produto e a list ao mesmo tempo como postei no post anterior?

Obrigado!

Lucas_Cavalcanti 22 de jul. de 2011

ah… não dá pra usar o result.use(json()) duas vezes, senão ele retorna um json inválido…

crie um objeto que tenha produto e list, ou use o próprio produto se existir esse atributo dentro dele

vasilvei 25 de jul. de 2011

Não entendi muito bem, como criar um objeto:

Obejto 
 Object prodItem;
como que eu faço para atribuir o produto e list<Item> no  prodItem e mandar por json ao mesmo tempo?

Lucas_Cavalcanti 25 de jul. de 2011

class AlgumNome {
   private Produto produto;
   private List<Item> itens;
}

e manda serializar uma instancia dessa classe

vasilvei 25 de jul. de 2011

No caso isso:

@Restrito
	@Get
	@Path("/ultimoProduto")
	public void ultimoProduto() {		
		ProdItem produtoItens = new ProdItem();
		try {
			produtoItens.produto = dao.primeiroOuUltimo("desc");

			if (produtoItens.produto != null) {
				produtoItens.itens = daoItem.lista(produtoItens.produto
						.getIdproduto());
				result.use(Results.json()).withoutRoot().from(produtoItens)
						.serialize();

			} else {
				result.forwardTo("/WEB-INF/jsp/produto/produtoEdit.jsp");
			}

		} catch (Exception e) {
			result.forwardTo("/WEB-INF/jsp/produto/produtoEdit.jsp");
		}
	}
	
	class ProdItem {
		private Produto produto;
		private List<Item> itens;
	}

Lucas_Cavalcanti 25 de jul. de 2011

exato…

só no forwardTo, é melhor vc fazer um:

result.forwardTo(this).produtoEdit();
//ou
result.forwardTo(ProdutoController.class).produtoEdit();

vasilvei 25 de jul. de 2011

Eu compilei e fiz um debug, ele carrega certo e tudo mais o produto, e List, só que quando eu chamo no browser aparece vazio: {}

URL : http://localhost:8080/Coliseu/ultimoProduto

@Restrito
	@Get
	@Path("/ultimoProduto")
	public void ultimoProduto() {		
		ProdItem produtoItens = new ProdItem();
		try {
			produtoItens.produto = dao.primeiroOuUltimo("desc");

			if (produtoItens.produto != null) {
				produtoItens.itens = daoItem.lista(produtoItens.produto
						.getIdproduto());
				result.use(Results.json()).withoutRoot().from(produtoItens).include("produto.filial", "produto.grupo", "produto.subgrupo", "produto.tributacoes",
						"produto.icms")
						.serialize();

			} else {
				result.forwardTo(this).produtoEdit();
			}

		} catch (Exception e) {
			result.forwardTo(this).produtoEdit();
		}
	}
	
	class ProdItem {
		private Produto produto;
		private List<Item> itens;
	}

sem os include acontece as mesmas coisas.

Lucas_Cavalcanti 25 de jul. de 2011

dá um include também em “produto” e “itens”

vasilvei 25 de jul. de 2011

Deu certo, era isso mesmo, valeu Lucas…

Rafael_Ferraro 23 de jul. de 2013

Galera, primeiro desculpa ressuscitar o tópico, mas achei melhor do que criar outro.
Estou com o mesmo problema, não consigo popular minha tabela com os dados serializados em json, porém minha tabela será exibida em uma janela modal.
Sou iniciante em javascript, por isso estou apanhando, vou postar apenas meu código javascript que está junto com o script de abertura e montagem da janela modal, pois em minha controller os dados estão sendo serializados corretamente e até consigo visualiza-los.

function addImovel(nome) {
                                var $include = "<td>" + nome + "</td>";
                                $('#lista-dados').append($include);
                            }

                            //método que irá conectar com minhas informações json via ajax
                            $.getJSON('<c:url value="/imoveis/listarJson/${pessoaSessao.id}"/>', function(json) {
                                console.log("json:", json); //aqui executa
                                for (var imovel = 0; imovel < json.length; imovel++) { //aqui não executa 
                                    addImovel(json.list[imovel].titulo);
                                }
                            });

Lucas_Cavalcanti 24 de jul. de 2013

se json é um object, object não tem .length.

provavelmente o que vc quer é algo como:

for (var imovel = 0, l = json.list.length; imovel < l; imovel++) { 
   addImovel(json.list[imovel].titulo);  
}

ou usar:

$.each(json.list, function() {
   addImovel(this.titulo);
});

Rafael_Ferraro 24 de jul. de 2013

Era isso mesmo Lucas, meu método retorna uma lista de objetos imóveis no caso.
Deu certo, muito obrigado !

Criado 21 de julho de 2011

Ultima resposta 24 de jul. de 2013

Respostas 19

Participantes 3

19 Respostas

Topicos relacionados