JQuery: Having trouble properly displaying table

Question

Hello! Recently I've been working on a web application that is using JQuery to parse the JSON and display it in the HTML view. I cannot figure out why the table the following code outputs ends the tag immediately after the first .append method.

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $("#displayencoders").append('<table class="encoders"><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>');

        $.each(data, function(i, item) {
            $("#displayencoders").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });

        $("#displayencoders").append("</table>");

    });
});

The above code will output the HTML below.

<table class="encoders">
<tbody><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr></tbody>
</table>
<tr><td>rmcp2-encoder</td><td>inactive</td></tr><tr><td>rmcp2-encvm1</td><td>active</td></tr><tr><td>rmcp2-encvm2</td><td>active</td></tr><tr><td>rmcp2-encvm3</td><td>active</td></tr><tr><td>rmcp2-encvm4</td><td>inactive</td></tr><tr><td>rmcp2-encvm5</td><td>active</td></tr><tr><td>rmcp2-encvm6</td><td>active</td></tr><tr><td>rmcp2-encvm7</td><td>inactive</td></tr><tr><td>rmcp2-encvm8</td><td>inactive</td></tr>

In other words, how can I modify my existing JQuery code to move my tag to the end of the actual table?

Thanks in advance.

Answer 1

I suggest revising your code into :

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {
        $('<table>').addclass('encoders').appendTo('#displayencoders');
        $('<tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>').appendTo('.encoders');

        $.each(data, function(i, item) {
            $("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>").appendTo('.encoders');
        });

    });
});

Answer 2

when you use append(), the DOM gets updated. I think (and this might differ per browser), if you open an element, add that to the DOM, the browser will "help" you, and close the tag for you. The best way to solve this, is to make a variable within the function, and only append the html when you have all the code:

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        var html = '<table class="encoders"><tr class="rows"><th class="j">Encoder Name</th><th class="j">Status</th></tr>';

        $.each(data, function(i, item) {
            html += "<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>";
        });
            html += "</table>";
        $("#displayencoders").append(html);

    });
});

Answer 3

I don't think there's a need to have the table tag be created dynamically. Start with html that includes:

<table id="encoder-table" class="encoders">
    <tr class="rows">
       <th class="j">Encoder Name</th>
       <th class="j">Status</th>
    </tr>
</table>

Then:

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $.each(data, function(i, item) {
            $("#encoder-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });
    });
});