Jquery Append To Html Table

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) a

Solution 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 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="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;
      }
 });

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

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

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

Solution 3:

Here's a solution with a sample JSON file.

JS Fiddle DEMO

HTML Code:

<tableid="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.

Solution 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);
      }
 //})

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

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