Carregar uma table com campos com json.[RESOLVIDO]

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.

sempre tem, o problema é quanto trabalho vc vai ter :wink:

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.

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

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)

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.

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

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

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!

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

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?
class AlgumNome {
   private Produto produto;
   private List<Item> itens;
}

e manda serializar uma instancia dessa classe

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;
	}

exato…

só no forwardTo, é melhor vc fazer um:

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

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.

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

Deu certo, era isso mesmo, valeu Lucas…

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.

[code] function addImovel(nome) {
var $include = “

” + nome + “”;
$(’#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);
                            }
                        });[/code]

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

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