Problems printing a JSON table

2

I can not print the table, what's wrong with my code?

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;

Example: link

    
asked by anonymous 30.04.2015 / 03:57

2 answers

4

Your code is originally only generating this output: <table><tr> .

As you can see, only a small part of your code was being assigned to the results variable, this is why you start a for (which itself does not return anything).

After you start this structure, nothing else is concatenated to the results, due to some "semantic" problems.

In javascript ; can be omitted after a line break, so you did not have a "syntax error" with the start of for and even then it ran without problem.

In addition, <tr> creates a single line, apparently you need to create one for each record in your JSON, right? If yes, you must concatenate it at every iteration of your for .

Then, consider changing from:

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 />";

For something like this:

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 />";

Below is a complete and functional example, see if this is what you really need:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){varjson=[{"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>
    
30.04.2015 / 04:31
2

You can not use a for loop within a concatenation in this way. Note that your results variable is global, you should add var before to limit it to the scope of the location. Also note that as you have you are only generating 1 row and not one per JSON Array object.

Mute

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 />";

for

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

In this way you create a new line within each cycle iteration.

jsFiddle: link

    
30.04.2015 / 05:43