jQuery append to HTML table

Question

I am trying to populate a blank table with data returned from Ajax request. The table populates inside the correct columns, but all the data data is clumped up (in a long string) and all the interest rate data is clumped up (in a long string). Despite this the Console.log() line works perfect and shows each item, enumerated, all on seperate lines.

My code is below:

HTML

<table id="table" border="1">
    <tr>
        <th>Date</th>
        <th>Value</th>
    </tr>
    <tr>
        <td id='col1'></td>
        <td id='col2'></td>
    </tr>
  </table>

Javascript/jQuery

$.getJSON("api", function(data) {
     for (var x =1; x <= data.count -1 ; x++){
         $("#col1").append(data.observations[x].date);
         $("#col2").append(data.observations[x].value);
         console.log(x, data.observations[x].date, data.observations[x].value);
      }
 })

How can I rewrite it so that each date and interest rate is on a seperate row. Example: row1:date1 and value1, row2: date2 and value2, etc..

P.S. Answer should include $.getJSON(api, data) and NOT included $.parseJSON(data) or $.each(data)) or success: function (data))

You need to create rows and cells ... append the cells to the rows, append the rows to the table. What you're doing now is appending the text to a single cell. — theGleep, Oct 17 '17 at 19:29
That is happening because you are appending the data as 2 long strings to `#col1` and `#col2`, you have to loop and for each cell add a `` and for every row `` or at least add a `
` after each "cell" — DIEGO CARRASCAL, Oct 17 '17 at 19:56
Possible duplicate of [Using jQuery to build table rows from Ajax response (Json)](https://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-response-json) — adiga, Oct 17 '17 at 20:06

Master Yoda · Accepted Answer · 2017-10-17T20:04:22.250

Try dynamically generating a new <tr> row for each result within your table. Example below will also give you unique id's for each new <td> column dynamically added e.g. col-1, col-2 etc.

var i = 1;
var j = 2;

for( i=1; i<=10; i++)
{
  $("#table").append("<tr><td id='col-" + i + "'>" + "col-" + i + "</td><td id='col-" + j + "'>" + "col-" + j + "</td></tr>");
  
  i++;
  j = j+2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <th>Date</th>
    <th>Value</th>
  </tr>
</table>

And your script would be something like:

$.getJSON("api", function(data) 
{
    var x = 1;
    var z = 2;

     for (x =1; x <= data.count -1 ; x++){
         $("#table").append("<tr><td id='col" + x + "'>" + data.observations[x].date + "</td><td id='col" + z + "'>" + data.observations[x].value + "</td></tr>");

         x++;
         z = z+2;
      }
 });

It will create many element with the same ID, ID must be uniques — RafH, Oct 17 '17 at 19:43
Okay then you can increment the id using the for loop. Ill update the answer. — Master Yoda, Oct 17 '17 at 19:44

score 2 · Answer 2 · answered Oct 17 '17 at 19:32

$.getJSON("api", function(data) {
     var $table = $("#table")
     
     for (var x =1; x <= data.count -1 ; x++){
      var $row = $("<tr>"),
        dateCell = $("td").text(data.observations[x].date),
        valueCell = $("td").text(data.observations[x].value)
        $row.append(dateCell).append($valueCell)
        $table.append($row)
        
        console.log(x, data.observations[x].date, data.observations[x].value);
      }
 })

<table id="table" border="1">
    <tr>
        <th>Date</th>
        <th>Value</th>
    </tr>
    <tr>
        <td id='col1'></td>
        <td id='col2'></td>
    </tr>
  </table>

(since I don't have access to your API, this is completely untested)

Why is there a dollar sign next to valueCell? Is this a typo? — user3062459, Oct 17 '17 at 19:53
No - just a standard I use to hint that I'm dealing with a jQuery object instead of a DOM object. — theGleep, Oct 17 '17 at 20:29

Shashank · Answer 3 · 2017-10-17T19:52:07.347

Here's a solution with a sample JSON file.

JS Fiddle DEMO

HTML Code:

<table id="table" border="1">
    <thead>
      <tr>
          <th>Date</th>
          <th>Value</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

JS:

  onSuccess: function (response) {
            response.forEach(function(row) {
        $('table#table tbody').append("<tr class='tablerow'><td class='col1'>"+row.date+"</td><td class='col2'>"+row.value+"</td></tr>");
      });
  }

You may have to change the HTML table as well (i.e. separate the header and body by thead and tbody). Above code will add rows based on the response length. Hope this helps.

score 0 · Answer 4 · answered Oct 17 '17 at 19:34

here is my method, make a template and then replace the variables with the values, I have commented out the main lines and made a mockup demo.

//$.getJSON("api", function(data) {
var data = [1,2,3,4];
     for (var x of data){
         //var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', data.observations[x].date).replace('$2', data.observations[x].value);
         var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', 1).replace('$2', 2);
         $('#table').append(html);
         //console.log(x, data.observations[x].date, data.observations[x].value);
      }
 //})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
    <tr>
        <th>Date</th>
        <th>Value</th>
    </tr>
  </table>

score 0 · Answer 5 · answered Oct 17 '17 at 19:44

0

Append a row and cells for each records :

for (var x=0 ; x<data.count ; x++){
     var obs = data.observations[x];
   $('<tr/>').append(
    $("<td/>").text(obs.date),
    $("<td/>").text(obs.value)
  ).appendTo("#table")
}

answered Oct 17 '17 at 19:44

RafH

4,504
2
23
23

jQuery append to HTML table

5 Answers5

Linked