1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

JQuery Template não extrai atributos

O problema é que meu Servlet envia um JSON para uma página jsp, o objeto é um JSON válido, eu consigo pegar os parâmetros com "objeto[index].propriedade" de boa, mas o problema é com os templates (tmpl).

Tenho um Servlet que faz uma consulta e a partir dela me gera o seguinte JSON:

[{"id":2,"nome":"Teste","edicao":"verde","texto":"testando","type":4,"subType1":3,"subType2":2,"subType3":1,"preco":250},
{"id":1,"nome":"Primeiro","edicao":"azul","texto":"filtro amarelo","type":3,"subType1":1,"subType2":3,"subType3":2,"preco":345}]

A minha jsp que recebe o JSON:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/estiloShop.css">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Template Teste</title>
        <script type="text/javascript" src="scripts/jquery-1.12.0.js"></script>
        <script type="text/javascript" src="scripts/menuLoader.js"></script>         
        <script type="text/javascript" src="scripts/jquery.tmpl.js"></script>

        <script id="element-template" type="text/x-jquery-tmpl">
            <tr>
                <td>${id}</td>
                <td>${nome}</td>
                <td>${edicao}</td>
                <td>${texto}</td>
                <td>${type}</td>
                <td>${subtype1}</td>
                <td>${subtype2}</td>
                <td>${subtype3}</td>
                <td>${preco}</td>
            </tr>
        </script>

        <script type="text/javascript">
            $(document).ready(function() {               
                $.ajax({
                    url : "ShopServlet",
                    type : "POST",
                    contentType : "application/json; charset=utf-8",
                    dataType : "json",
                    context : jQuery('#elementTable'),
                    success : function(cards) {

                        $("#elementTable").empty();
                        $("#element-template").tmpl(cards).appendTo("#elementTable");
alert("desgraça");                
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="tudo">
            <div id="nav">
                <div id="logo"><img src="images/logo.png"></div>
                <div id="navuser"></div>
            </div>
            <div id="conteudo">

            </div>
            <div>
                <table>
                    <thead>
                        <th>Id</th>
                        <th>Nome</th>
                        <th>Edição</th>
                        <th>Texto</th>
                        <th>subtype1</th>
                        <th>subtype2</th>
                        <th>subtype3</th>
                        <th>preco</th>
                    </thead>
                    <tbody id="elementTable">
                    </tbody>
                </table>
            </div>
        </div>

    </body>
    <footer>
        RODAPE
    </footer> 
</html>

O resultado que eu tenho é o template sem os dados dos objetos, ela conta a quantidade de objetos e gera a mesma quantidade em linhas (tr) vazias. Ou seja, se meu JSON tem 2 objetos, minha "elementTable" fica:

<tbody id="elementTable">
<tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
        </tbody>

Embora eu tenha por exemplo um "${id}" no template, ele não extrai o dado id do objeto.

Obrigado e qualquer informação adicional que for necessária eu disponibilizo.

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery ou faça a sua própria pergunta.