Question

I’m very very new to JS and client side,
please help me to achieve this:

Every time I add subject to database, I want it to appear in the table.

html

    {% block main-menu %}
        <h3>Existing Subjects</h3>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Documents</th>
                    <th>Followers</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Posted By</th>
                </tr>
            <tbody>
            {% if subjects %}
                    <tr id="subject-description-main-menu-list">
                        <th id="subject-name"></th>
                        <th id="subject-docs"></th>
                        <th id="subject-followers"></th>
                        <th id="subject-created"></th>
                        <th id="subject-updated"></th>
                        <th id="subject-posted-by"></th>
                    </tr>
            {% endif %}
            </tbody>
        </table>
    {% endblock %}

And this is my Jquery:

function fill_subject_table_in_main_content() {
    $("#subject-description-main-menu-list").text('');
    $.get("/subject/list/", function(data){
        var FIELDS = ['name', 'num_of_followers', 'created_time', "created_by"];
        for( var i=0; i<data.length; i++) {
            for ( var j=0; j<FIELDS.length; j++) {
                $("#subject-description-main-menu-list").append('<th>'+data[i]['fields'][FIELDS[j]]+'</th>');
            }
        };
    }, 'json');
}

Data that I’m getting via get method is correct, but it appears in one row….. But I want it to be as a table…

now it looks like this:

Existing Subjects
Name    Documents   Followers   Created                           Updated   Posted By
Math 140       NONE             1         2012-08-17 08:04:02      NONE       r English 102 1   2012-08-17 08:04:14 r

Answer 1

First off, you’re appending header tags to the table. You’ll want “td” instead. Second, you’re calling .append on $(“#subject-description-main-menu-list”) which is a row. You should be appending rows to the table and appending the data to each row.

Something like:

for( var i=0; i<data.length; i++) {
var newRow = document.createElement("tr");
for ( var j=0; j<FIELDS.length; j++) {
    $(newRow).append('<td>'+data[i]['fields'][FIELDS[j]]+'</td>');
}
$("#yourTableId").append(newRow);

};