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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 17, 2017 at 20:38 user3062459 asked Oct 17, 2017 at 19:27 user3062459user3062459 1,63188 gold badges2929 silver badges4141 bronze badges 3

• 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 Commented Oct 17, 2017 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 <td></td> and for every row <tr></tr> or at least add a <br/> after each "cell" – DIEGO CARRASCAL Commented Oct 17, 2017 at 19:56
• Possible duplicate of Using jQuery to build table rows from Ajax response (Json) – adiga Commented Oct 17, 2017 at 20:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

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

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.

here is my method, make a template and then replace the variables with the values, I have mented 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
    <tr>
        <th>Date</th>
        <th>Value</th>
    </tr>
  </table>

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