CODEWITHSUNDEEP
jqueryloops
Sizzling Code
Sizzling Code

Reputation: 6070

How to populate a table using jQuery

I am trying to populate a simple table with 1 column using jquery. I'm trying the code on sidebar gadget so can't figure out what the problem.

Here this is the json array I want to populate in the table.

[{"roomName":"admin"},{"roomName":"administrator"},{"roomName":"super Administrator"},{"roomName":"baba ji ka boota"}]

Here what i have done so far.

    $.each(dataFromMainFile, function(item) {
        $('<tr>').append($('<td>').text(item.roomName)).appendTo('#data-Table tbody');
    });

Below is HTML where I want this to populate

<table id="data-Tables" class="data-Tables" cellpadding=0 cellspacing=0 border=0>
    <thead>
    <tr>
        <th>Room</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td id="testingbaba2">Director Room No: 36</td>
    </tr>
    <tr>
        <td id="testingbaba">Director Room No: 36</td>
    </tr>
    </tbody>
</table>

what is it I am doing wrong. I cant see errors in the gadget, that's why can't figure out the problem.

Upvotes: 0

Views: 74

Answers (2)

aolsen
aolsen

Reputation: 36

Looks like you're just passing the index, and not the element (item).

Your target id is also wrong. In your markup the ID you want is '#data-Tables', but you're passing to '#data-Table'.

Try this:

$.each(dataFromMainFile, function(index, item) {
    $('#data-Tables tbody').append('<tr><td>' + item.roomName + '</td></tr>');
});

Here's a fiddle of it: http://jsfiddle.net/4yy2za6w/1/

Upvotes: 1

DeFeNdog
DeFeNdog

Reputation: 1210

I'd do something like this:

    $.each(dataFromMainFile, function(item) {
        $("#myTable").append('<tr><td>' + item.roomName + '</td></tr>');
    });

Upvotes: 0

Related Questions