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..

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

Answer 1

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 eg 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;
      }
 });

Answer 2

 $.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)

Answer 3

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 (ie separate the header and body by thead and tbody). Above code will add rows based on the response length. Hope this helps.

Answer 4

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> 

Answer 5

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")
}