2

Não consigo imprimir a tabela, o que há de errado no meu código?

var json =
[
    {
        "tempoNS":104095548,
        "tempoMS":104,
        "tamanhoArray":9000,
        "nome":"Bubble iterativo"
    },
    {
        "tempoNS":84671736,
        "tempoMS":84,
        "tamanhoArray":9000,
        "nome":"Bubble recursivo"
    },
    {
        "tempoNS":22793428,
        "tempoMS":22,
        "tamanhoArray":9000,
        "nome":"Insertion iterativo"
    },
    {
        "tempoNS":243897911,
        "tempoMS":243,
        "tamanhoArray":9000,
        "nome":"Insertion recursivo"
    }
];

var tamanhoJson = json.length;
results = 
"<table>"+
    "<tr>"          
        for (var i = 0; i < json.length; i++)
        {
            +"<td>"+json[i].tamanhoArray + " Elementos</td>"+
            "<td>"+json[i].nome + " </td>"+
            "<td>"+json[i].tempoNS + " ns</td>"+
            "<td>"+json[i].tempoMS + " ms</td>"

        }
    +"</tr>"+

"</table>"+
"<br />";

var div = document.getElementById("tabelaDinamica2");
div.innerHTML = results;

Exemplo: http://jsfiddle.net/8kkg3/565/

2 Respostas 2

4

Seu código originalmente está gerando apenas esta saída: <table><tr>.

Como você pode perceber, apenas uma pequena parte do seu código estava sendo atribuída à variável results, isto por que você inicia um for (que por si só não retorna nada).

Depois que você inicia esta estrutura nada mais é concatenado à results, devido a alguns problemas de "semântica".

Em javascript o ; pode ser omitido depois de uma quebra de linha, então você não tinha um "erro" de sintaxe com o início do for e mesmo assim ele era executado sem problema.

Além disto, <tr> cria uma única linha, aparentemente você precisa criar uma para cada registro do seu JSON, certo? Se sim, você deve concatená-lo em cada iteração do seu for.

Então, considere alterar de:

var tamanhoJson = json.length;
results = 
"<table>"+
    "<tr>"          
        for (var i = 0; i < json.length; i++)
        {
            +"<td>"+json[i].tamanhoArray + " Elementos</td>"+
            "<td>"+json[i].nome + " </td>"+
            "<td>"+json[i].tempoNS + " ns</td>"+
            "<td>"+json[i].tempoMS + " ms</td>"

        }
    +"</tr>"+

"</table>"+
"<br />";

Para algo deste tipos:

var tamanhoJson = json.length;
var results = "<table>";

for (var i = 0; i < tamanhoJson; i++) {
    results += "<tr>";
    results += "<td>" + json[i].tamanhoArray + " Elementos</td>";
    results += "<td>" + json[i].nome + " </td>";
    results += "<td>" + json[i].tempoNS + " ns</td>";
    results += "<td>" + json[i].tempoMS + " ms</td>";
    results += "</tr>";
} 

results +="</table>";
results += "<br />";

Abaixo um exemplo completo e funcional, veja se é o que você de fato precisa:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var json = [{
                "tempoNS": 104095548,
                "tempoMS": 104,
                "tamanhoArray": 9000,
                "nome": "Bubble iterativo"
            }, {
                "tempoNS": 84671736,
                "tempoMS": 84,
                "tamanhoArray": 9000,
                "nome": "Bubble recursivo"
            }, {
                "tempoNS": 22793428,
                "tempoMS": 22,
                "tamanhoArray": 9000,
                "nome": "Insertion iterativo"
            }, {
                "tempoNS": 243897911,
                "tempoMS": 243,
                "tamanhoArray": 9000,
                "nome": "Insertion recursivo"
            }, {
                "tempoNS": 57896229,
                "tempoMS": 57,
                "tamanhoArray": 9000,
                "nome": "Selection iterativo"
            }, {
                "tempoNS": 34119355,
                "tempoMS": 34,
                "tamanhoArray": 9000,
                "nome": "Selection recursivo"
            }, {
                "tempoNS": 6322368,
                "tempoMS": 6,
                "tamanhoArray": 9000,
                "nome": "Merge iterativo"
            }, {
                "tempoNS": 2057750,
                "tempoMS": 2,
                "tamanhoArray": 9000,
                "nome": "Merge recursivo"
            }, {
                "tempoNS": 1600741,
                "tempoMS": 1,
                "tamanhoArray": 9000,
                "nome": "Quick recursivo"
            }, {
                "tempoNS": 2621617,
                "tempoMS": 2,
                "tamanhoArray": 9000,
                "nome": "Heap recursivo"
            }, {
                "tempoNS": 3081947,
                "tempoMS": 3,
                "tamanhoArray": 9000,
                "nome": "CombSort Sem Otimização"
            }, {
                "tempoNS": 3163448,
                "tempoMS": 3,
                "tamanhoArray": 9000,
                "nome": "CombSort Com Otimização"
            }];
            var tamanhoJson = json.length;
            var results = "<table>";
            
            for (var i = 0; i < tamanhoJson; i++) {
                results += "<tr>";
                results += "<td>" + json[i].tamanhoArray + " Elementos</td>";
                results += "<td>" + json[i].nome + " </td>";
                results += "<td>" + json[i].tempoNS + " ns</td>";
                results += "<td>" + json[i].tempoMS + " ms</td>";
                results += "</tr>";
            } 
            
            results +="</table>";
            results += "<br />";

            var div = document.getElementById("tabelaDinamica2");
            console.log(results);
            div.innerHTML = results;
        });
    </script>
    <body>
        <div id="tabelaDinamica2"></div>
    </body>
</html>

2

Não podes usar um ciclo for dentro de uma concatenação dessa maneira. Repara que a tua variável results está global, deves adicionar var antes para a limitar ao escopo da local. Repara ainda que como tens estás somente a gerar 1 linha e não uma por objeto da Array do JSON.

Muda

results = 
"<table>"+
    "<tr>"          
        for (var i = 0; i < json.length; i++)
        {
            +"<td>"+json[i].tamanhoArray + " Elementos</td>"+
            "<td>"+json[i].nome + " </td>"+
            "<td>"+json[i].tempoNS + " ns</td>"+
            "<td>"+json[i].tempoMS + " ms</td>"

        }
    +"</tr>"+

"</table>"+
"<br />";

para

var content = '';
for (var i = 0; i < json.length; i++) {
    content+= '<tr><td>' + json[i].tamanhoArray + ' Elementos</td>' +
        '<td>' + json[i].nome + ' </td>' +
        '<td>' + json[i].tempoNS + ' ns</td>' +
        '<td>' + json[i].tempoMS + ' ms</td></tr>'

}
var results = '<table>' + content + '</table>';

Desta maneira crias uma linha nova dentro de cada iteração do ciclo.

jsFiddle: http://jsfiddle.net/8kkg3/566/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .