Adding new data from JSON to existing table

Question

I am trying to add new data (from JSON) to existing table (using jquery).

In my html I have this table for example:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="Filter Columns" id="MyTable">
  <thead>
    <tr>
      <th data-priority="1">A</th>
      <th data-priority="2">B</th>
      <th data-priority="3">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
    </tr>
  </tbody>
  </table>

I am trying to do this (for adding new data from JSON):

var response = [{
      "A":"a2",
      "B":"b2",
      "C":"c2"
     },
     {
      "A":"a3",
      "B":"b3",
      "C":"c3"
    },
    {
      "A":"a4",
      "B":"b4",
      "C":"c4"
    }];

    $.each(response, function(i, item) {
                $('<tr>').html(
                //"<tr>" +
                "<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable');
        });

Why doesn't it work?

Do you agree that if you append to #MyTable the new elements will be out of tbody or thead elements ? — DontVoteMeDown
– DontVoteMeDown, Commented May 6, 2014 at 17:48
yes I am agreeing with you. and I do not know how to changing / fixing it. — yoka
– yoka, Commented May 6, 2014 at 17:51

DontVoteMeDown · Accepted Answer · 2014-05-06 18:02:18Z

2

You're appending the content to the table itself and not to the thead or tbody elements, which is what should be done. Try changing your selector in .appendTo to #MyTable tbody and it will work. Demo here.

edited May 6, 2014 at 18:02

answered May 6, 2014 at 17:53

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MD. Sahib Bin Mahboob · Accepted Answer · 2014-05-06 17:52:32Z

0

You were accessing the object in wrong way.Try this code snippet.

$.each(response, function(i, item) {
                    $('<tr>').html(
                      "<td>" + item.A + "</td><td>" + item.B + "</td><td>" + item.C + "</td>" + "</tr>").appendTo('#MyTable tbody');
            });

answered May 6, 2014 at 17:52

MD. Sahib Bin Mahboob

20.6k2 gold badges25 silver badges45 bronze badges

Comments

TML · Accepted Answer · 2014-05-06 17:52:50Z

0

Use $('<tbody>').append instead of $('<tr>').html().

$.each(response, function(i, item) {
    $('<tbody>').append(
    "<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable');
});

You can see it in action at this JSFiddle.

answered May 6, 2014 at 17:52

TML

13k3 gold badges42 silver badges47 bronze badges

4 Comments

MD. Sahib Bin Mahboob Over a year ago

Why not acces object like item.A instead of response[i].A? What if you have two tbody in DOM?

TML Over a year ago

No particular reason not to do it that way, I just copied the code from the question with the minimal changes to help him see the difference. Your answer way is just as good.

MD. Sahib Bin Mahboob Over a year ago

I believe it's best to show OP the best practise too. Though it's just my personal opinion :)

TML Over a year ago

No disagreement here, I just didn't take the time to do it in this case. Good on you!

thispatchofsky · Accepted Answer · 2014-05-06 17:57:52Z

0

Try the following snippet. This creates the 'tr' elements in the html.

    $.each(response, function(i, item) {
$("#MyTable tbody").append("<tr> <td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>  </tr>");                 
            });

answered May 6, 2014 at 17:57

thispatchofsky

8546 silver badges16 bronze badges

2 Comments

MD. Sahib Bin Mahboob Over a year ago

Why not acces object like item.A instead of response[i].A?

thispatchofsky Over a year ago

It makes no difference. I just have it there since that's what the question had.

Coderaemon · Accepted Answer · 2014-05-07 03:44:44Z

0

Do this:

table_html = '';
$.each(response, function(index, value) {
table_html += "<tr><td>"+value["A"]+"</td><td>"+value["B"]+"</td><td>"+value["C"]+"</td></tr>"   
        });

Give some id to <tbody> tag.

$("tbodyid").html(table_html);

answered May 7, 2014 at 3:44

Coderaemon

3,9177 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Adding new data from JSON to existing table

5 Answers 5

Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related