Problems printing a JSON table

Asked

Viewed 89 times

2

I can’t 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: http://jsfiddle.net/8kkg3/565/

javascript json

2 answers

4


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

As you can see, only a small part of your code was being assigned to the variable results, this why you start a for (that by itself nothing returns).

After you start this structure nothing else is concatenated to Results, due to some problems of "semantics".

In javascript the ; can be omitted after a line break, so you didn’t have a syntax "error" with the start of for and yet he was executed without a problem.

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

So 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 full 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() {
            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

You can’t use a cycle for within a concatenation in this way. Notice that your variable results is global, you should add var rather to limit it to the scope of the site. Also note that as you have you are only generating 1 line 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>';

This way you create a new line within each iteration of the cycle.

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

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.