Populate Existing Table With Data Using JQuery

Question

Using the method below I am trying to populate an existing table with data however the function fills it with the same values. I can perform such action adding append method, but in my case the table should be exist already :)

HTML

<table class="table">
        <tr><td></td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
</table>

JQuery

$.each(data, function(i, value){
    $(".table td").text(value.product);
}); 

var data= [
{"product":"RD0"},
{"product":"RD1-184"},
{"product":"RD1-185"}
]

Hint: You're looping through the data and adding every item to each cell. You have forgotten to loop through the cells. — Pete
– Pete, Commented Feb 4, 2016 at 21:31

idream1nC0de · Accepted Answer · 2016-02-04 21:31:40Z

4

Here's a code snipped using your sample from above with a demo in JSFiddle.

$(function() {
  var data = [{
    "product": "RD0"
  }, {
    "product": "RD1-184"
  }, {
    "product": "RD1-185"
  }];
  var table = $('.table');
  $.each(data, function(i, value) {
    table.find('tr').eq(i).find('td').text(value.product);
  });
});

https://jsfiddle.net/qur62os2/

answered Feb 4, 2016 at 21:31

idream1nC0de

1,1895 silver badges13 bronze badges

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

2 Comments

idream1nC0de Over a year ago

Not a problem! If this solved the problem for you, would you kindly consider marking it as the answer?

egurb Over a year ago

Sure, I just need to wait 3 more minutes to select answer

Abdul Ahmad · Accepted Answer · 2016-02-04 21:40:39Z

2

you probably need something like this:

$(".table").find('td').each(function(i) {
  $(this).text(data[i].product);
});

https://jsfiddle.net/ahmadabdul3/fn8q8e3x/

edited Feb 4, 2016 at 21:40

answered Feb 4, 2016 at 21:31

Abdul Ahmad

10.1k16 gold badges76 silver badges136 bronze badges

Collectives™ on Stack Overflow

Populate Existing Table With Data Using JQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related